vue刷新网页后vuex的state数据丢失
1. 产生原因
因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。
2. 解决思路
-
state里的数据全部是通过请求来触发action或mutation来改变
-
将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie)中
第一种方案基本不可行,除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。
3. 分析过程
-
localStorage是永久存储在本地,除非你主动去删除;
-
sessionStorage是存储到当前页面关闭为止;
-
cookie则根据你设置的有效时间来存储,但缺点是不能储存大数据且不易读取。
所以可以选择sessionStorage来进行本地存储,选择的原因vue是单页面应用,操作都是在一个页面跳转路由,另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。
3. 解决办法
因为是只有在刷新页面时才会丢失state里的数据,所以我们只需要在点击页面刷新时先将state数据保存到sessionStorage,然后再真正刷新页面。
关键:beforeunload这个事件在页面刷新时先触发的。那这个事件应该在哪里触发呢?我们总不能每个页面都监听这个事件,所以我选择放在app.vue这个入口组件中,这样就可以保证每次刷新页面都可以触发。
export default {
name: 'App',
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))
})
}
}