Vuex页面刷新数据丢失解决方案

前言

在 Vue 项目中使用 Vuex 做集中数据储存管理应用的所有组件状态，并以相应的规则保证状态以一种可预测的方式发生变化。就像一个容器把所有组件的公共数据或状态放入这个容器中。

页面刷新数据丢失解决方案

在页面刷新时将 vuex 里的信息保存到 sessionStorage 里，可以通过 addEventListener 监听 beforeunload 事件把 vuex 保存到 sessionStorage 里，当页面加载时获取 sessionStorage 里的数据，通过 $store.replaceState 将数据覆盖到 vuex 原对象属性中。这样就能够解决刷新页面数据丢失问题。

ps：虽然解决了页面刷新问题，但实际上还存在一个问题😑，就是在sessionStorage 中所保存的数据并非持久化储存，当浏览器或页面被关闭时就会清空，无法做到用户第二次进入页面得到数据😭。在这里我使用的是 localStorage 把数据保存到客户端本地硬件设备中(机智如我😏)。比较简陋、有一定的风险。在不与后端交互的情况下你有什么好的办法或建议请到评论区扣我，学习学习。😘

/* App.vue */
created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (localStorage.getItem("is_dev_data") != null && localStorage.getItem("is_dev_data") !== "") {
      let stringify = localStorage.getItem('is_dev_data');
      this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(stringify)))
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      let stringify = JSON.stringify(this.$store.state)
      localStorage.setItem('is_dev_data', stringify)
    });
    //ios废弃了beforeunload，使用pagehide代替
    window.addEventListener("pagehide", () => {
      let stringify = JSON.stringify(this.$store.state)
      localStorage.setItem('is_dev_data', stringify)
    });
}