浏览器刷新VueX的state数据丢失问题

浏览器刷新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));
    });
  },