一天小编在写一个有关处理vueX数据刷新时丢失的一个工具类,具体如下
// tool.js
import store from "@/store";
export async function restoreStore() {
const savedData = JSON.parse(localStorage.getItem("myData"));
window.addEventListener("beforeunload", () => {
localStorage.setItem("myData", JSON.stringify(store.state));
});
localStorage.removeItem('myData')
if (savedData) {
store.replaceState(savedData);
}
}
new Vue({
router,
store,
render: (h) => h(App),
created() {
restoreStore()
},
}).$mount("#app");
思路就是:
1、监听beforeunload发生时将当时vueX的信息转大json并保存在本地
2、当页面加载时触发restoreStore方法从而取回vueX里的信息
写完后没感觉哪里有问题,电脑调试也没问题,但是后来用手机查看网页时候我人傻了,vueX保存的工具类竟然没有发生?!
当时我小脑就萎缩了,后来经过小编的不断调试终于发现了问题所在!!
beforeunload是不被移动端支持的,需要替换成pagehide
解释:
pageshow事件:这个事件在用户浏览网页时触发,pageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发,pageshow 事件在每次加载页面时触发,即 onload 事件在页面从浏览器缓存中读取时不触发。
后改如下,问题终于得到解决!
import store from "@/store";
export async function restoreStore() {
const savedData = JSON.parse(localStorage.getItem("myData"));
window.addEventListener("pagehide", () => {
localStorage.setItem("myData", JSON.stringify(store.state));
});
localStorage.removeItem('myData')
if (savedData) {
store.replaceState(savedData);
}
}