vue页面刷新时store中数据丢失

问题：

当页面刷新时store的值丢失了。

原因：

当页面刷新时，vue实例重新加载，所以store也会被重置。

解决办法：

监听 beforeunload 让页面在刷新前将数据存到 sessionStorage 中，在页面刷新时，读取 sessionStorage 中的数据到 store 中。

即在app.vue中加入以下代码：

export default {
  name: "App",
  created() {
    let state = sessionStorage.getItem("state");
    if (state) {
      this.$store.replaceState(
        Object.assign(this.$store.state, JSON.parse(state))
      );
      sessionStorage.clear();
    }
  },

  mounted() {
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("state", JSON.stringify(this.$store.state));
    });
  },
  beforeDestroy() {
    window.removeEventListener("beforeunload");
  }
};

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6528