关于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回答

ustbhuangyi

2019-10-17

这个取决于需求吧,把整个 store 都存储到 sessionStorage 中也不一定需要,还是看需求。另外关于 vuex 和 store 的配合课程后面也有涉及到。
关于课程中遇到的问题应该还有更好的解决方案,会在 Vue 3.x 重构课程中体现。

0
1
MeSKiL
非常感谢!
2019-10-18
共1条回复

Vue2.0高级应用教学实战,开发企业级移动端音乐Web App

Vue.js高级知识应用大集合,实战企业级APP,教你搞定组件化开发。

5432 学习 · 3804 问题

查看课程