在入口文件对刷新事件进行监听,刷新是触发beforeunload,然后将整个vuex信息放入浏览器本地存储中
mounted () {
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})
}
刷新结束后,会触发vue钩子created,判断本地存储是否有store,如果有,则利用vue中的this.$store.replaceState,官网介绍替换 store 的根状态，仅用状态合并或时光旅行调试。可以直接覆盖state,利用Object.assign对状态管理器进行合并或覆盖
created () {
if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
sessionStorage.removeItem('store')
}
}
引用:
vuex冷门实例方法replaceState、watch、subscribe、subscribeAction等介绍
