浏览器刷新VueX的state数据丢失问题
在vue项目开发过程中,我们会将一些必要的数据存入到state中,而当浏览器刷新时这些数据丢失往往会导致一些错误的发生。
1.解决方案:
在浏览器刷新之前(即监听window的beforeunload
),将state存储到loaclStorage
或者sessionStorage
中,然后在App.vue的Created
钩子中将之前存储在Storage中的state重新存入到VueX的state
中。
2.App.vue中的代码如下:
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));
});
},