全栈的自我修养 ———— vuex处理数据消失(由于pc端和移动端的差异，beforeunload带来的巨坑！！！)

一天小编在写一个有关处理vueX数据刷新时丢失的一个工具类，具体如下

// tool.js
import store from "@/store";
export async function restoreStore() {
  const savedData = JSON.parse(sessionStorage.getItem("myData"));
  window.addEventListener("beforeunload", () => {
    sessionStorage.setItem("myData", JSON.stringify(store.state));
  });
  sessionStorage.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);
  }
}