在vue项目中用vuex来做全局的状态管理,发现当刷新网页后,保存在vuex实例store里的数据会丢失。
原因:因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化。
有两种方法解决该问题:
1、使用vuex-along
2、使用localStorage或者sessionStorage
使用vuex-along
vuex-along的实质也是将vuex种的数据存放到localStorage或者sessionStorage中,只不过这个存取过程组件会帮忙完成,我们只需要用vuex的读取方式操作就可以了。简单介绍vuex-along的使用方法。
安装 vuex-along:
npm install vuex-along --save
配置 vuex-along: 在 store/index.js 中最后添加以下代码:
import VueXAlong from 'vuex-along' //导入插件
export default new Vuex.Store({//modules: {//controler //模块化vuex//},plugins: [VueXAlong({name: 'store', //存放在localStroage或者sessionStroage 中的名字local: false, //是否存放在local中 false 不存放 如果存放按照下面session的配置session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中})]
});
使用localStorage或者sessionStorage
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));});
},