如何让Vuex刷新页面数据不丢失？实现方法和原理 vuex-persistedstate 和 vuex-persist的使用

如题：由于vue自身特性的原因，vuex中的数据在页面刷新之后其中的数据会初始化，这就导致组件之间通过vuex传递的数据在用户f5刷新页面之后会丢失

页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。

vuex的优劣势：

•      优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到
•      劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。
•      为了克服这个问题，vuex-persistedstate和 vuex-persist出现了~~

原理：

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

区别与建议： 个人还是推荐使用vuex-persistedstate，因为使用vuex-persist在一些浏览器，ie和微信会出现语法报错的问题

• vuex-persist是TypeScript类型，vuex-persistedstate是JavaScript类型，默认vue的webpack是没有对TypeScript进行编译的
• 如果想要使用vuex-persist需要手动配置一下webpack，使用 webpack 编译 TypeScript 代码

第一种：vuex-persistedstate

• 结构
• 安装

  npm install vuex-persistedstate  --save

• 引入及配置
  • 在store下的index.js中

  • import Vue from 'vue';
    import Vuex from 'vuex';
    import info from './modules/user-info';
    import knowledge from './modules/knowledge';
    import sixElements from './modules/six-elements';
    import difficultySpeed from './modules/difficulty-speed';
    
    import createPersistedState from 'vuex-persistedstate';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        modules: {
            info,
            knowledge,
            sixElements,
            difficultySpeed
        },
        plugins: [
            createPersistedState({
                storage: window.sessionStorage,
                paths: ["info", "knowledge", "sixElements", "difficultySpeed"]
            })
        ],
    });
    
    export default store;
    

    给

  • vuex-persistedstate源码地址及API

  • 

第二种：vuex-persist

• 目录结构
• 安装

  npm install vuex-persist --save

   

• 引入及配置
  • 在store下的index.js中

• import Vue from 'vue';
  import Vuex from 'vuex'
  import VuexPersistence from 'vuex-persist'
  import conversion from './modules/conversion'
  import userInfo from './modules/userInfo'
  import tagviews from './modules/tagviews'
  
  Vue.use(Vuex);
  
  const vuexLocal = new VuexPersistence({
      key: 'message',
      storage: window.localStorage,
      reducer: (state) => ({userInfo: state.userInfo})
  })
  const vuexSession = new VuexPersistence({
      key: 'message',
      storage: window.sessionStorage,
      reducer: (state) => ({tagviews: state.tagviews})
    })
  const store = new Vuex.Store({
      modules: {
          conversion,
          userInfo,
          tagviews
      },
      plugins: [vuexSession.plugin, vuexLocal.plugin]
  })
    
  export default store

   

• vuex-persist的API