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

一.造成此现象的原因
因为js代码是运行在内存中的，代码运行时的所有变量，函数也都是保存在内存中的。
刷新页面时，以前申请的内存被释放，重新加载脚本代码，变量重新复制，所以这些数据要想储存在就必须储存在外部，例如：LocalStorage，SessionStorage 等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上，做持久化储存。具体选择哪一个就根据你的项目实际需求来选择。
vuex 中的数据存储是Session级别的，但是一刷新就会没。
二.解决方案
　在客户端存储数据：

HTML5提供了2种在客户端存储数据的新方法：localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限，具有自行百度。

web存储分为localStorage个sessionStorage。

区别在于存储的有效期和作用域不同。

通过localStorage存储的数据是永久性的，除非web应用刻意删除存储的数据，或者用户通过设置浏览器配置（浏览器提供的特定的UI）来删除，否则数据将一直保存在用户的电脑上，永不过期。

localStorage的作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据（不论该源的脚本是否真正的访问localStorage）。他们可以互相读取对方的数据，甚至可以覆盖对方的数据。但是，非同源的文档间互相都不能读取或者覆盖对方的数据。（即使他们运行的脚本是来自同一台第三方的服务器也不行）。

sessionStorage存储数据的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的，一旦窗口或者标签页被永久关闭了，那么所有通过sessionStorage存储的数据也都被删除了。
三.具体实现(下面来上代码)
在项目的的入口文件app.vue中

//解决 页面刷新 数据丢失问题
  created() {
    //在页面加载时读取sessionStorage里的状态信息
    // console.log('');
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  },

在这里我是放在created中的,你也可以放在别的生命周期里。
提醒一下
我这里使用sessionStorage，这里需要注意的是vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变。