解决vuex页面刷新数据丢失问题

一、出现原因

vuex中的数据相当于是全局变量，保存在浏览器的堆栈内存中。一旦刷新浏览器页面，之前存储数据的堆栈内存就会释放，vuex里的数据会重新初始化。

二、解决办法 

方法一、将数据存储到浏览器本地

建议使用sessionStorage或者localStorage

在app.vue文件里
vue2 的 mounted生命周期下 或 vue3的 onMounted生命周期下

// 监听页面刷新前，将vuex数据存在本地
window.addEventListener("beforeupload", () => {
  localStorage.setItem("stateInfo", JSON.stringify(this.$store.state));
});
// 刷新后，将本地对应数据替换到vuex，并将本地对应数据删除
if (localStorage.getItem("stateInfo")) {
  this.$store.replaceState(
    Object.assign(
      {},
      this.$store.state,
      JSON.parse(localStorage.getItem("stateInfo"))
    )
  );
}
localStorage.removeItem("stateInfo")

 方法二、利用插件

目前使用推荐：vuex-persistedstate、vuex-along、vuex-persist