页面刷新 vuex数据持久化

安装插件

npm install vuex-persistedstate  --save

store/index.js 下配置

import Vue from 'vue';
import Vuex from 'vuex';
import state from '@/store/states';
import getters from '@/store/getters';
import mutations from '@/store/mutations';
import actions from '@/store/actions';

// vuex-persistedstate默认持久化所有state，指定需要持久化的state
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
  plugins: [createPersistedState({
  	//存储到sessionStorage（cookie与localStore一样）
    storage: window.sessionStorage,
  })],
});

vuex-persistedstate默认持久化所有 state，指定需要持久化的 state。
配置如下：plugins后面加数组可以配置多个

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer(val) {
       return {
          // 只需要储存state中的userInfo
          userInfo: val.userInfo
      }
    }
  })],
});