vuex-persisted-plugin

Vuex 状态管理中实现持久化存储的插件。 它可以将 Vuex 的状态持久化到本地存储（如LocalStorage或SessionStorage），并在页面刷新后自动恢复这些状态，从而实现了状态的持久化。

该插件的主要作用是解决以下问题：
在页面刷新后，Vuex 状态会被重置，导致用户需要重新进行登录等操作。

通过使用该插件，您可以轻松地实现以上功能，而无需手动编写逻辑来处理状态的持久化和恢复。

安装

#PNPM
pnpm add vuex-persisted-plugin

# NPM
npm install vuex-persisted-plugin

# YARN
yarn add vuex-persisted-plugin

使用

import { createStore } from "vuex";
import { persistedPlugin } from "vuex-persisted-plugin";
const store = createStore({
 // ...其他配置
 plugins: [
  persistedPlugin({
   paths: [],
  }),
 ],
});

属性&方法

|属性|说明|类型|默认值| |---|---|---|---| |paths|需要持久化状态属性集合|(string|Path)[]|[]| |storage|指定存储类型|Storage|localStorage| |storageKey|存储中存储状态的键值|string|__VUEX_PERSIST_PLUGIN__| |getState|自定义获取本地存储中状态的逻辑|(storage: Storage, key: string) => Record<string, unknown>;|(storage, key) => {return storage.getItem(key) && JSON.parse(storage.getItem(key)!)}| |setState|用于自定义将状态存储到本地存储的逻辑|(storage: Storage, key: string, value: unknown) => void;|(storage, key, value) => {storage.setItem(key, JSON.stringify(value));}| |removeState|用于自定义从本地存储中移除状态的逻辑|(storage: Storage, key: string) => void;|(storage, key) => {storage.removeItem(key)}| |mutationFilter|用于过滤哪些 mutation 会触发状态持久化|(mutation: MutationPayload) => boolean|(mutation) => true| |resetMutationType|指定一个 mutation 类型会重置状态为初始状态|string|__RESET_STATE__|

可以通过配置选项来实现对状态持久化的更加灵活的控制和定制化

定制化使用的示例

import { createStore } from "vuex";
import { persistedPlugin } from "vuex-persisted-plugin";
import { localStore, sessionStore } from "@manzhixing/web-storage-adapter";  // 封装的Storage的第三方库
const store = createStore({
    state() {
    return {
     count: 0,
     userInfo: {
      name: "chengbotao",
      email: "[email protected]",
     },
    };
   },
 // ...其他配置
 plugins: [
  persistedPlugin({
     storage: localStore, // 存在localStorage
     storageKey: "__PERSIST_PLUGIN__", // 自定以键值
     paths: [
      "count",
      {
       paths: ["userInfo.name"],  // 将 userInfo.name 缓存到 sessionStorage
       storage: sessionStore,
      },
     ],
     // 第三方库存取移出的自定义逻辑
     getState(storage, key) {
      return storage.get(key) as Record<string, unknown>;
     },
     setState(storage, key, value) {
      storage.set(key, value);
     },
     removeState(storage, key) {
      storage.remove(key);
     },
  }),
 ],
});

重置已持久化状态恢复初始值

// 恢复所有持久化状态为初始值
store.commit("__RESET_STATE__");
// 只恢复指定持久化状态为初始值
store.commit("__RESET_STATE__", ["userInfo.name"]);

Docs

文档地址

License

MIT