H5W3
当前位置:H5W3 > 问答 > 正文

vuex刷新页面丢失store数据问题解决方案

最近遇到个问题,vue中vuex中的store数据,会在页面刷新后初始化,为了解决这一问题决定将store里面数据在页面刷新前保存到sessionStorage,至于为何用他,因为页面关闭后他会被清空,localStorage则会一直存在,cookie又太小,因此sessionStorage最合适。

解决方案

  • 在app.vue的created方法中读取sessionstorage中的数据存储在store中,此时用vuex.storereplaceState方法,替换store的根状态
  • beforeunload方法中将store.state存储到sessionstorage中。
export default {
name: 'app',
created () {
// 在页面加载时读取sessionStorage
if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
}
// 在页面刷新时将store保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
}
}

本文地址:H5W3 » vuex刷新页面丢失store数据问题解决方案