vuex 저장 후, 새로고침 시

참고로 저는 아래와같이 사용한답니다 먼저 npm i vuex-persistedstate 로 설치해주시고 아래와 같이 폴더 구성합니다. (사진) store/index.js import Vue from 'vue'; import Vuex from 'vuex'; import createPersistedState from 'vuex-persistedstate'; Vue.use(Vuex); import userStore from './modules/userStore.js'; const store = new Vuex.Store({ modules: { userStore: userStore, }, plugins: [createPersistedState()], }); export default store; store/modules/userStore.js const userStore = { namespaced: true, state: { username: '', }, getters: { GET_USER_NAME: state => state.username, }, mutations: { SET_USER_NAME: (state, payload) => { state.username = payload.username; }, }, actions: { SET_USER_NAME({ commit }, payload) { commit('SET_USER_NAME', payload); }, }, }; export default userStore; 위와같이 사용하면 영구 저장 되지만, 반대로 초기화가 필요할 때 초기화 되지 않는 문제도 생깁니다. 그러므로 저는 초기 불러올 때 (예: created 훅) 에서 state를 초기화 시켜주는식으로 사용합니다. js-cookie와의 연동도 함께 찾아보시면 좋을거같아요

vuex 저장 후, 새로고침 시

vuex-persistedstate 위 키워드로 검색해보시면 원하시는 답변 얻을 수 있을 것 같아요