vuex页面刷新导致数据丢失的解决方案
解决vuex页面刷新导致数据丢失问题
vuex数据是存在内存当中，当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题:
1.使用vuex-along
2.使用localStorage或者sessionStroage
1.使用vuex-along
vuex-along的实质也是将vuex中的数据存放到localStorage或者sessionStroage中，只不过这个存取过程这个组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了,简单了解一下vuex-along的使用方法。
安装vuex-along:
npminstallvuex-along--save
配置vuex-along:在store/index.js中最后添加以下代码:
importVueXAlongfrom'vuex-along'//导入插件
exportdefaultnewVuex.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数据丢失的资料请关注毛票票其它相关文章！