yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate

import Vuex from "vuex";
// 引入插件
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const state = {};
const mutations = {};
const actions = {};

const store = new Vuex.Store({
	state,
	mutations,
	actions,
  /* vuex數(shù)據(jù)持久化配置 */
	plugins: [
		createPersistedState({
      // 存儲方式：localStorage、sessionStorage、cookies
			storage: window.sessionStorage,
      // 存儲的 key 的key值
			key: "store",
			render(state) {
        // 要存儲的數(shù)據(jù)：本項目采用es6擴展運算符的方式存儲了state中所有的數(shù)據(jù)
				return { ...state };
			}
		})
	]
});

export default store;

/* module.js */
export const dataStore = {
  state: {
    data: []
  }
}
 
/* store.js */
import { dataStore } from './module'
 
const dataState = createPersistedState({
  paths: ['data']
});
 
export new Vuex.Store({
  modules: {
    dataStore
  },
  plugins: [dataState]
});

yarn add vuex-persist
// 或
npm install --save vuex-persist

import Vuex from "vuex";
// 引入插件
import VuexPersistence from "vuex-persist";

Vue.use(Vuex);
//  初始化
const state = {
	userName:'admin'
};
const mutations = {};
const actions = {};
// 創(chuàng)建實例
const vuexPersisted = new VuexPersistence({
	storage: window.sessionStorage,
  render:state=>({
  	userName:state.userName
    // 或
    ...state
  })
});

const store = new Vuex.Store({
	state,
  actions,
  mutations,
  // 數(shù)據(jù)持久化設(shè)置
  plugins:[vuexPersisted.plugins]
});

export default store;