새로고침시 데이터 유지

참고

1. npm install vuex-persistedstate

2. index.js에 다음의 코드 추가

   import createPersistedState from 'vuex-persistedstate'
   
   const root = createStore({
     namespaced: true,
     state,
     getters,
     mutations,
     actions,
     // 추가할 부분
     plugins: [
       createPersistedState()
     ]
   })

여기까지만 해도 새로고침시 데이터가 유지된다.

그러나 store에 있는 값들이 모두 localstorage에 저장되어 실제 서비스라면 브라우저 속도에 지장이 갈 수 있다.

우리는 state, actions, mutations, getters를 나눠서 사용하지만 아마 회사에서는 store에 기능별로 모듈을 나눠서 그 모듈 안에 state, actions, mutations, getters가 자리하도록 하는 것 같고, 필요한 모듈의 state만 유지되도록 설정할 수 있다.

필요하면 맨 위의 [참고]에 들어가서 확인!