小记页面刷新vuex的状态丢失问题

解决方案一、保存到sessionStorage

• 因为vuex中的数据是保存在内存中的所以页面刷新之后vuex中的状态会丢失，解决方案就是在页面刷新的时候把状态存在sessionStorage中，页面加载的时候再取出来
• 可以把下面的代码放在App.vue的created钩子函数中，这样就能保证所有的页面刷新都会走这一步

created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.dispatch("setUserLoginState", JSON.parse(sessionStorage.getItem("store")).isUserLogin);
    }

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

解决方案二、使用vuex-persistedstate插件

• 安装插件：npm install --save vuex-persistedstate

根据自己的vue版本选择

1. vuex-persistedstate 3.x (for Vuex 3 and Vue 2)

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});

2. vuex-persistedstate 3.x (for Vuex 4 and Vue 3)

import { createStore } from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = createStore({
  // ...
  plugins: [createPersistedState()],
});