0
点赞
收藏
分享

微信扫一扫

vuex刷新页面数据丢失怎么解决

鱼板番茄 2022-02-11 阅读 104
前端

原因

vuex中 store 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值

如何解决

监听页面是否刷新,若页面刷新了,将vuex中的state 里的数据保存到浏览器缓存(localStorage、sessionStorage、cookie)中

// 在app.vue 中增加监听刷新事件
export default {
  name: "App",
  created() {
    // 在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload", () => {
      localStorage.setItem("messageStore", JSON.stringify(this.$store.state));
    });
    // 在页面加载时读取localStorage里的状态信息
    this.saveState();
  },
  methods: {
    saveState() {
      if (localStorage.getItem("messageStore")) {
        // 此时用vuex.store的 replaceState方法,替换store的根状态
        this.$store.replaceState(
          Object.assign(
            this.$store.state,
            JSON.parse(localStorage.getItem("messageStore"))
          )
        );
      }
    }
  }
};
举报

相关推荐

0 条评论