vue页面刷新时store中数据丢失基础指南_数据基础知识教程

问题:当页面刷新时store的值丢失了。原因:当页面刷新时,vue实例重新加载,所以store也会被重置。解决办法:监听 beforeunload 让页面在刷新前将数据存到 sessionStorage 中,在页面刷新时,读取 sessionStorage 中的数据到 store 中。即在app.vue中加入以下代码:export default {name

vue页面刷新时store中数据丢失基础指南

问题:

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");
  }
};
海计划公众号
(0)
上一篇 2020/03/22 20:50
下一篇 2020/03/22 20:50

您可能感兴趣的内容