2020-06-17 解决刷新页面时Vuex中数据清空(vuex持久化)

其实就是利用sessionStorage将Vuex里的数据做一个保存，然后监听刷新事件去除数据。

代码如下：

store中的index.js：

export default new Vuex.Store({
  state: sessionStorage.getItem("state")
    ? JSON.parse(sessionStorage.getItem("state"))
    : {
        userId: 0
      },
  mutations: {
    setUserId(state, payload) {
      state.userId = payload.userId;
    }
  },
  actions: {},
  modules: {},
});

App.vue：

  methods: {
    saveState() {
      sessionStorage.setItem("state", JSON.stringify(this.$store.state));
    }
  },
  mounted() {
    window.addEventListener("unload", this.saveState);
  }

2020-08-25更新： 直接使用vuex持久化插件：vuex-persistedstate

yarn add vuex-persistedstate

store下index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import persistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app
  },
  getters,
  plugins:[persistedState()]
})

export default store

参考：刘世涛619247 vuex中store保存的数据，刷新页面会清空

FE小帅 vuex持久化 vuex-persistedstate