vue是单页面应用,页面切换都是在一个页面跳转路由,因此sessionStorage较为合适。(sessionStorage的生命周期是在仅在当前会话下有效)
所以应该在页面加载的时候将store里面的状态传入进sessionStorage里面
在app.vue内假如以下代码
created() {
// 在页面加载时读取sessionStorage里的状态信息,还原store
if (sessionStorage.getItem('store')) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem('store'))
)
)
// 还原store后,删除sessionStorage里的备份状态信息
sessionStorage.removeItem('store')
}
// 在页面刷新时将store里的信息保存到sessionStorage里,以便刷新页面后还原store
window.addEventListener('beforeunload', ()=> {
sessionStorage.setItem(
'store',
JSON.stringify(this.$store.state)
)
})
},