소켓을 App.vue에서 사용하다보니 하위 컴포넌트에서 ws.send 해야 할 때마다 emit 쓰기 귀찮았다. 그러다 'store에서 ws 모듈을 사용하면 컴포넌트 상관없이 쓸 수 있지 않을까?' 라는 생각을 하게 되었다. ws 사용 방법 이것을 store에 만드는 것은 아주아주 쉬웠다. composition api 사용할 때와 같다! import { defineStore } from 'pinia'; import { ref } from '@vue/reactivity'; export const IndexSotre = defineStore('IndexSotre', () => { const isLogin = ref(false); // login true or false vlaue const wsData = r..
[Vue.js 3] 새로고침 데이터 유지(pinia-plugin-persistedstate-2)
import { defineStore } from 'pinia'; import { ref } from '@vue/reactivity'; export const IndexStore = defineStore('IndexStore', () => { const isLogin = ref(false); // login true or false return { isLogin, }; }, { persist: true }); 새로고침을 해도 로그인 상태를 유지해야한다. 그래서 알아본게 vuex-persistedstate다. 그런데 이렇게 빨간 글씨로 경고문구가 있으면 사용하지 않는 것이 안전하다고 생각되어 한참 고민하다가 알게되었다. pinia-plugin-persistedstate-2 간단히 설명하자면 store에 있..
[Vue.js 3] Pinia 설치
새로고침 시 상태 유지하려고 Vuex 공부하려는데 상태 관리 라이브러리를 Pinia로 바꿨다고 한다. 참고링크 일단 도전 정신으로 설치해보자! App.vue에서 sotre 사용할 때는 //App.vue import { indexStore } from '@/store/index'; export default { setup () { const store = indexStore(); return { store } }; } import할 때 사용한 indexStore는 맘대로 바꿀 수 있다. 단, store에 있는 변수명과 composition api에서 사용하는 이름이 같아야 한다. 공식문서