如题：由于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

---------------------
作者：希文Gershwin
来源：CSDN
原文：https://blog.csdn.net/weixin_44309374/article/details/101150536
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件