浏览器刷新恢复Vuex数据

前言

我们在使用Vue框架时，常常会引入Vuex作为跨组件数据与状态管理工具。
由于Vuex的数据是存储在内存中的，那么当浏览器刷新时，Vue实例会重新加载，原本存在的Vuex数据将会丢失。这其中可能包含一些必要的认证信息，使得站点需要重新登录，影响用户体验。

使用sessionStorage解决

sessionStorage是window对象属性，允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在页面刷新时数据不会删除，但在关闭窗口或标签页将会删除这些数据。

提示: 如果想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 该数据对象没有过期时间，除非用户手动去删除。

sessionStorage常用方法

setItem()

setItem(key, value)方法将key=value这个键值对存储于浏览器中。
举例：sessionStorage.setItem("name", "zimskyzeng")

getItem()

getItem(key)方法从浏览器中将键为key的值取出。
举例：console.log(sessionStorage.getItem("name"))

removeItem()

removeItem(key)方法从浏览器中将键为key的值删除。
举例：sessionStorage.removeItem("namne")

clear()

clear()方法将浏览器中存储的所有键值对删除。
举例：sessionStorage.clear()

缓存Vuex配置

App.vue中配置

App.vue是组件树的顶端，在这里配置恢复与缓存策略可以对所有页面生效。
由于已经在Vue的虚拟DOM中，这里采用原生的Vuex引入方式。

created() {
      // 先检查sessionStorage中是否有数据，若存在数据则加载到vuex
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(
          Object.assign(
            {},
            this.$store.state,
            JSON.parse(sessionStorage.getItem("store"))
          )
        );
        sessionStorage.removeItem("store")
      }

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

额外配置

这里的额外配置主要是为了解决某些自定义鉴权的场景，由于路由的router.beforeEach()是优先于虚拟DOM处理的，因此若我们在main.js文件中引入了自定义的鉴权js配置(其中包含了beforeEach处理)，那么我们同样需要在自定义鉴权中做相同处理。
需要注意的是，在这里引入Vuex的方式为import store from '../store'。

// 进入路由鉴权前，将缓存的sessionStore信息写入store
if (sessionStorage.getItem("store")) {
  store.replaceState(
    Object.assign(
      {},
      store.state,
      JSON.parse(sessionStorage.getItem("store"))
    )
  );
  sessionStorage.removeItem("store")
}