Vuex+vuex-persistedstate数据持久化

你有没有遇到过使用Vuex保存数据时，浏览器一刷新就重置数据？接下来教大家一招解决Vuex数据持久化，让大家放心刷新。1.安装Vuexnpminstallvuex--save2。安装vuex-persistedstatenpminstallvuex-persistedstate--save3。在src下新建一个store文件夹，新建一个js文件index.jsimportVuefrom'vue'importVuexfrom'vuex'importpersistedStatefrom'vuex-persistedstate'Vue.use(Vuex);conststore=newVuex.Store({//状态数据持久化插件参考vuex-persistedstate:[persistedState({storage:window.sessionStorage})],//this.$store.state.***state:{key1:'value1',key2:'value2',},mutations:{//删除状态this.$store.commit('remover','key1');remover(state,key){state[key]='';},//更新状态this.$store.commit('upDate',{key1:'value3'});upDate(state,obj){letkey=Object.keys(obj)[0];state[key]=obj[key];},//添加状态信息addUserInfo(state,obj){state.userInfo=obj;},},});exportdefaultstore官方不建议直接使用==对state进行操作删除状态this.$store.commit('remover','key1');更新状态this.$store.commit('upDate',{key1:'value3'});4.在main.js中引入storeimportVuefrom'vue'importrouterfrom'./router'importAppfrom'./App'importstorefrom'./store'；//引入storeVue.config.productionTip=false;newVue({el:'#app',router,store,//声明挂载store组件:{App},template:''})这样当您刷新浏览器时，数据不会被重置。原理是它在sessionStorage中保存了一份vuex相关的数据。当我们使用commit对state中的数据进行操作时，sessionStorage中的数据也会随之发生变化，刷新时会从sessionStorage中取出数据。如果不想保存sessionStorage中的数据，可以将store中js文件的window.sessionStorage改成其他插件：[persistedState({storage:window.sessionStorage})],