解决vuex刷新浏览器或者F5刷新，数据丢失问题

在vue项目中存储数据一般都会vuex,vuex有个问题一刷新数据就不见了，重置为默认值，那要解决这个问题怎么办？

1. vuex 的优缺点

 优：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到
 缺：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

2.解决

1. 插件vuex-persistedstate
2. 原理:

将vuex的state存在localStorage或sessionStorage或cookie中
刷新页面的一瞬间，vuex数据消失，vuex会去sessionStorage中拿数据，变相的实现了数据刷新不丢失

3. 源码网址
4. 用法

//1.下载
yarn add vuex-persistedstate -s
//2.引用<直接在store/index.js 中引用>
import createPersistedState from 'vuex-persistedstate';	
export default new Vuex.Store({
   modules: {
      home,
   },
   state: {},
   mutations: {},
   actions: {},
   getters,
   plugins: [
      createPersistedState({
         storage: window.sessionStorage,
         key:'isDisplay',
         paths:['home'],
         // 写法1
         // reducer: (state) => ({userInfo: state.userInfo})// 只储存state中的isDisplay
         // 写法2
         // reducer(val) {
         //    return {
         //    // 只储存state中的isDisplay
         //       isDisplay: val.home.isDisplay
         //    };
         // }
      })
   ]
});

注：plugins是数组，可存多个，具体使用还是看看原网址