一、插件：vuex-persistedstate

二、使用：

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
  state:{
    a:1,
    b:2,
  },
  plugins: [
    createPersistedState({//local持久化
      key:"project",
      storage:window.localStorage,
      reducer(val){
        return {
          token:val.a,
        }
      },
    }),
    createPersistedState({//session持久化
      key:"project",
      storage:window.sessionStorage,
      reducer(val){
        return {
          search:val.b,
        }
      },
    })
  ]
});
export default store;

三、优点
1、解决页面刷新，vuex中存放的数据丢失问题
2、在项目开发过程中更易维护缓存中存放的数据，缓存中所有存放的数据在代码中可清晰看见。
3、统一缓存中写入与读取的入口。

四、注意事项
1、vuex-persistedstate是通过调取mutations中的方法更新state数据时同步存到缓存中的，所以，state的初始值是不会存放到缓存中且通过this.$store.state.a = 1方式修改state的值也是不会触发同步缓存的。
2、缓存的中的数据不会反向同步到state中，解决方案：

const projectLocal= window.localStorage.getItem("project") ? JSON.parse(window.localStorage.getItem("project")) : {};
const projectSession= window.sessionStorage.getItem("project") ? JSON.parse(window.sessionStorage.getItem("project")) : {};
const state = {
    a:projectLocal.a? projectLocal.a: 1,
    b:projectSession.b? projectSession.b: 2,
};
export default state;

3、因为localStorage中存放的数据是在浏览器中，所以如果同时打开多个页面时，修改localStorage中的值是不会同步到每个页面的，如果需求需要同步可以配合缓存监听使用，或根据具体需求采取更优的解决方案。

 window.addEventListener("storage",()=>{});//缓存修改时当前展示的页面不会触发，其他页面会触发。