这六个事半功倍的 Pinia 库，你一定要知道！

上次我分享了 pinia-colada，很多朋友都觉得很赞，本文将继续分享我最找到的几个非常不错的 Pinia 插件，帮助你更高效地管理应用状态。

正文

1. pinia-plugin-persistedstate

如果你想让 localStorage / sessionStorage 和 pinia 同步，那么可以先试试这个库，而且还支持自定义持久化方式、支持 SSR

pinia-plugin-persistedstate

下面是简单的示例：

npm install pinia-plugin-persistedstate

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

export const useStore = defineStore('main', {
  state: () => ({ someState: 'hello pinia' }),
  persist: true,
});

2. pinia-plugin-persist

如果你想在简单场景下的保持状态持久化，并且是不需要复杂配置的小项目，那么或许可以试试更加轻量的pinia-plugin-persist

npm pinia-plugin-persist

npm install pinia-plugin-persist

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

const pinia = createPinia()
pinia.use(piniaPersist)

createApp({})
  .use(pinia)
  .mount('#app')

3. pinia-plugin-debounce

当你觉得频繁触发 Action，影响性能时，可以试试这个库，支持实时搜索和表单防抖！

npm pinia-plugin-debounce

下面是简单的示例：

npm install @pinia/plugin-debounce

import { createPinia } from'pinia';
import debounce from'lodash.debounce';
import piniaPluginDebounce from'@pinia/plugin-debounce';

const pinia = createPinia();
pinia.use(piniaPluginDebounce({ debounce }));

exportconst useSearchStore = defineStore('search', {
actions: {
    searchContacts() {
      // 搜索逻辑
    },
  },
debounce: {
    searchContacts: 300, // 300ms 防抖
  },
});

4. pinia-plugin-orm

当你需要对异步数据做 ORM 映射，比如用户列表、权限模型这类复杂数据关系管理时，可以使用这个库。

pinia-plugin-orm

下面是简单的示例：

npm install pinia-plugin-orm

// plugins/pinia-orm.ts
import { PiniaORM } from 'pinia-plugin-orm';

export default (pinia: Pinia) => {
  pinia.use(PiniaORM.install());
};

// stores/User.ts
import { defineStore } from'pinia';
import { Model } from'pinia-plugin-orm';

exportclass User extends Model {
static entity = 'users';

static fields() {
    return {
      id: this.attr(null),
      name: this.string(''),
      email: this.string(''),
      role: this.belongsTo(Role, 'roleId'),
    };
  }
}

exportconst useUserStore = defineStore('users', {
  actions: {
    async fetchUsers() {
      const data = await fetch('/api/users').then(res => res.json());
      User.insert({ data });
    },
  },
});

// stores/Role.ts
import { Model } from'pinia-plugin-orm';

exportclass Role extends Model {
static entity = 'roles';

static fields() {
    return {
      id: this.attr(null),
      name: this.string(''),
    };
  }
}

// 在组件中使用
const users = User.query().with('role').get();

5. pinia-plugin-shared-state

允许多窗口或标签页间共享 Pinia Store 状态，通过 localStorage 或 BroadcastChannel 同步数据。

这个是官方demo，可以在多个标签页打开：

/

下面是简单的示例：

npm install pinia-plugin-shared-state

import { createPinia } from'pinia';
import { createSharedState } from'pinia-plugin-shared-state';

const pinia = createPinia();
pinia.use(createSharedState({
  enable: true,
  initialize: true,
}));

exportconst useAuthStore = defineStore('auth', {
  state: () => ({ user: null }),
  actions: {
    async login() {
      const response = await fetch('/api/login');
      this.user = await response.json();
    },
  },
  share: {
    enable: true,
  },
});

6. pinia-undo

为 Pinia Store 添加了撤销/重做功能，跟踪状态变化并提供历史记录。

npm pinia-undo

下面是简单的示例：

pnpm add pinia pinia-undo

import { PiniaUndo } from'pinia-undo'

const pinia = createPinia()
pinia.use(PiniaUndo)

const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 10,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
})

const counterStore = useCounterStore()

counterStore.undo() // { count: 10 }
counterStore.redo() // { count: 10 }

counterStore.increment() // { count: 11 }
counterStore.increment() // { count: 12 }

counterStore.undo() // { count: 11 }
counterStore.undo() // { count: 10 }
counterStore.undo() // { count: 10 }

counterStore.redo() // { count: 11 }

最后

今天的分享就这些了，感谢大家的阅读，如果文章中存在错误的地方欢迎指正！