vue3 中 vuex 持久存储

1. 介绍

vue3、vuex、ts，vuex 中有些值存放到 localStorage 或 sessionStorage

2. 示例

安装：

npm i vuex-persistedstate

# "vuex-persistedstate": "^4.1.0"

使用：

import { createStore, createLogger } from 'vuex';
import type { Plugin } from 'vuex';
import createPersistedState from 'vuex-persistedstate';

const plugins: Plugin<any>[] = [];

const persistedStatePlugin = createPersistedState({
  key: 'VUEX',
  storage: window.localStorage,
  paths: [
    'USER_INFO',
  ],
});

plugins.push(persistedStatePlugin);

if (process.env.NODE_ENV === 'development') {
  plugins.push(createLogger());
}

export default createStore({
  plugins,

  state: {
    USER_INFO: {} as IUserInfo,
  },
});

3. 参考

• https://github.com/robinvdvleuten/vuex-persistedstate (opens new window)