解决vuex页面刷新导致数据丢失问题
vuex数据是存在内存当中，当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题:
1.使用vuex-along
2.使用localStorage或者sessionStroage
1.使用vuex-along
vuex-along的实质也是将vuex中的数据存放到localStorage或者sessionStroage中，只不过这个存取过程这个组件会帮我们完成,我们只需要用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中
})]
});
2.使用localStorage或者sessionStroage
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页面刷新导致数据丢失问题。按照上面的方法配置之后就可以正常使用vuex了，页面刷新数据也不会丢失了。
以上就是vuex页面刷新导致数据丢失的解决方案的详细内容，更多关于vuex 数据丢失的资料请关注其它相关文章！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“vuex页面刷新导致数据丢失的解决方案”评论...