关于vuex刷新
来源:6-5 歌手详情数据抓取
MeSKiL
2019-10-17
老师,这里应该是页面刷新的时候,vue实例重新生成了,就把原来实例上store的内容丢了。我觉得有更好的解决方案。
初始化的时候,也就是app.vue里增加监听,监听页面刷新,将vuex存入sessionStorage。并且如果sessionStorage有值,就将sessionStorage中的store赋值给this.$store。
具体的代码实现是这样的
// App.vue
created () {
if (sessionStorage.getItem('store')) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem('store'))
)
)
} // 载入的时候先看看sessionStorage里有没有store,有就把他赋值给this.$store上
// 监听页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload', () => { // 安卓
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
window.addEventListener('pagehide', () => { // ios
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
}
这样的话无论用户在哪个页面刷新。都不会丢失store的值了。并且如果用户关闭页面,浏览器也会自动的清空sessionStorage,也不会有历史数据残留的问题,这样感觉就很符合vuex实际用途了。
写回答
1回答
-
这个取决于需求吧,把整个 store 都存储到 sessionStorage 中也不一定需要,还是看需求。另外关于 vuex 和 store 的配合课程后面也有涉及到。
关于课程中遇到的问题应该还有更好的解决方案,会在 Vue 3.x 重构课程中体现。012019-10-18
相似问题