vuex 새고고침시 초기화 현상 방지 + secure ls

vuex-persistedstate 라는 npm 이고 vuex에 저장되는 값들을 사용하는 웹브라우저의 localstorage에 저장하며, 새로고침시 그 값이 있다면 localstorage의 값을 가져와 사용하는 방식이다..

 

 

localstorage에 올리면 누구나 다 볼 수 있으니 vuex-persistedstate 에서는 js-cookie, secure-ls를 이용하여 localstorage말고, cookie에 저장하는 방식과 암호화된 방식으로 데이터를 저장하는 방법을 알려주고 있다.

 

먼저 아래의 모듈을 설치해주자

npm install vuex-persistedstate

그리고 아래처럼 플러그 store의 플러그인을 만들어서 거기에 적어준다.

import Vue from vue;
import Vuex from vuex'
import createPersistedState from 'vuex-persistedstate';
import modules from './modules';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules,
  plugins: [
    createPersistedState();
  ]
})

그럼 우리의 모든 store에 있는 정보들이 다 local에 저장되지만 양이 많아지면 속도 저하로 이어질 수 있기에 꼭 필요한 것만 올려보려고 한다.

 

//src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import moduleName from './moduleName';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: moduleName,
  plugins: [
    //주목! : 여기에 쓴 모듈만 저장됩니다.
    createPersistedState({
      paths: ['moduleName'],
    });
  ]
})

export default store;

paths에 원하는 모듈의 이름을 적어주면 저것만 적힌다!!!

 

웹브라우저의 localstorage에 가보면 적힌 모듈의 state값만 들어있는 것을 확인할 수 있다.

 

근데 로컬스토리지에 올라간 정보가 암호화가 되지않으면 좋지않으니 

secure-ls를 사용하는 방법을 찾아보았다. 

npm i secure-ls

 

아래와 같이 추가만 해주면 사용할 수 있는 것 같다.. 왜 그런지는 모르겠다.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import common from './modules/common'

import SecureLS from "secure-ls";
const ls = new SecureLS({ isCompression: false });
Vue.use(Vuex)

export default new Vuex.Store({

  plugins : [
    createPersistedState({
      paths: ['manman'],
      storage: {
        getItem: (key) => ls.get(key),
        setItem: (key, value) => ls.set(key, value),
        removeItem: (key) => ls.remove(key)
      }
    
    })
  ]
  ,
  modules: {
    common,
    
  }
})