Vuex 새로고침 시 데이터 초기화 막기 [ vuex-persistedstate (세팅) 설명 ]

Vue에서 개발을 진행 할 때 쿠키에 데이터를 넣지않는 이상 새로고침 시 store에 state값이 초기화가 되어 버린다.

vuex-persistedstate를 이용하여 sessionStorage, localStorage 에 저장하여 새로고침이 되어도 데이터를 유지가 된다. 

 

 

설치 

npm i vuex-persistedstate

 

사용법

state가 저장된 파일에서 vuex-persistedstate를 import하여 사용한다.  

sesstionStorage로 세팅 새로고침이 되어도 데이터를 유지하려면 reducer 안에 초기화 되면 안되는 state 변수들을 넣어준다.

ex) vuex-persistedstate 세팅

import Vue from 'vue'
import Vuex from 'vuex'
import * as mutations from './mutations'
import * as actions from './actions'
Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
      reducer: state => ({
        msg: '',
        cash: 0
      })
    })],
  state: {
    msg: '',
    cash: 0,
  },
  mutations,
  actions
})