关于vuex刷新

Question

老师，这里应该是页面刷新的时候，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实际用途了。

Answer 1

ustbhuangyi 2019-10-17 23:43:49

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

• 提问者 MeSKiL #1

  非常感谢！