问题描述
存入vuex中的数据，在用户刷新页面后会丢失
原因解析
js代码运行时所有变量、函数都保存在内存中。刷新页面后，以前申请的内存被释放，脚本代码重新加载，变量会重新赋值。
解决方案一 sessionStorage
src\App.vue 中添加代码
created() { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$store.replaceState( Object.assign( {}, this.$store.state, JSON.parse(sessionStorage.getItem("store")) ) ); } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventListener("beforeunload", () => { sessionStorage.setItem("store", JSON.stringify(this.$store.state)); }); },
解决方案二 vuex-along
原理也是使用了本地存储，官网教程 https://github.com/boenfu/vuex-along/blob/master/README.md
npm install vuex-along --save
src\store\index.js 中添加
import createVuexAlong from "vuex-along"; //vuex-along
和
plugins: [createVuexAlong()], //vuex-along
最终效果如下：
import createVuexAlong from "vuex-along"; //vuex-along const store = new Vuex.Store({ plugins: [createVuexAlong()], //vuex-along state, getters, mutations, actions, }); export default store;
