vue3 Vuex数据持久化存储

import { createStore, createLogger } from 'vuex'
import { user } from './modules/user'
import { system } from './modules/system'
import createPersistedState from 'vuex-persistedstate';
import ls from '@/utils/local-storage';

const debug = process.env.NODE_ENV !== 'production';

const persistedPlugin = createPersistedState({
  paths: ['user'],
  storage: {
    getItem: (key) => ls.get(key),
    setItem: (key, value) => ls.set(key, value),
    removeItem: (key) => ls.remove(key)
  }
})

export default createStore({
  modules: {
    user,
    system,
  },
  strict: debug,
  plugins: [persistedPlugin],
})

local-storage 文件

npm install store  // 安装 store

user模块代码

import store from 'store';
import expirePlugin from 'store/plugins/expire';

// plugin usage:
store.addPlugin(expirePlugin);

export { store as localStorage };

export default store;

/*
 * @FilePath: \new-vue\src\store\modules\user\index.js
 */
import { state } from './state'
import { mutations } from "./mutations";
import { actions } from "./actions";
import { getters } from "./getters";

export const user = {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

/*
 * @FilePath: \new-vue\src\store\user\state.js
 */
export const state = {
  token: '',
  extra: '',
  username: '',
  system: ''
}

/*
 * @FilePath: \new-vue\src\store\user\getters.js
 */
export const getters = {
  token: state => state.token,
  extra: state => state.extra,
  username: state => state.username,
  system: state => state.system,
}

/*
 * @FilePath: \new-vue\src\store\modules\user\mutations.js
 */
export const mutations = {
  SET_INFO(state, info) {
    state.username = info
  }
}

/*
 * @FilePath: \new-vue\src\store\modules\user\actions.js
 */
export const actions = {
  SET_INFO({ commit }, info) {
    commit('SET_INFO', info)
  }
}