问题描述:
使用Vuex存储数据时,会出现刷新页面时Store中的值丢失的情况。这种情况下,可以将Store中的值存储在sessionStorage中。
思路分析:
1.监听页面刷新事件,可以使用beforeunload,页面刷新前,将Store中的值存储到sessionStorage中
2.页面刷新时,从sessionStorage中取出存储的值,重新存储到Store中
代码:
created () {
//重新将sessionStorage中的值存储到Store中,判断是否是初次进入的方法视自己而定
if (JSON.parse(sessionStorage.getItem("state"))) {
this.$store.commit(
"xxx/SET_DATA",
{
menu: JSON.parse(sessionStorage.getItem("state"))
}
);
}
//监听页面刷新
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("state", JSON.stringify(this.$store.state));
})
}