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

原因

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"))
          )
        );
      }
    }
  }
};