vue - 새로고침시 vuex데이터 초기화 방지

프로젝트를 진행중 새로고침시 vuex state데이터가 초기화 된다는것을 알게 되었다. vuex 에서 관리하는 데이터 중 초기화되면 안되는 데이터가 있기에 이를 해결하는 방법을 찾아봣으며, 이곳에 기술하려고 한다.

 

검색 결과 vuex-persistedstate를 사용하면 된다고한다. vuex-persistedstate는 localstorage를 이용하여 초기화를 방지해주는 vue 플러그인이라고 한다.

 

vuex-persistedstate를 사용하기 위해선 우선 프로젝트 파일에 설치를 진행해준다.

 

1. vuex-persistedstate 설치

npm install --save vuex-persistedstate

 

2. 적용

이번 글에서는 vuex store에 전역적으로 적용하려고 한다. 당연히 적용하고 싶은 모듈만 적용할 수 있으며, 이는 다음에 기술하겠다.

- store -> index.js 파일에 vuex-persistedstate를 import

  import  createPersistedState from 'vuex-persistedstate'

- plugins에 import한 파일 등록

const store = new Vuex.Store({
  modules: {
    // 모듈들
  },
  plugins: [
    // import한 vuex-persistedstate 등록
    createPersistedState()
  ]
})

 

위와같이 vuex-persistedstate를 설치 후 적용하면 새로고침 시에도 vuex에 있는 데이터가 초기화 되지 않는것을 확인할 수 있다.