Pinia 最新发布的 6 个插件，效率提升 300%！

Pinia 作为 Vue 官方推荐的状态管理库，其插件机制能有效扩展核心功能，覆盖 数据持久化、性能优化、开发调试、类型安全 等常见需求。

一、数据持久化插件：pinia-plugin-persistedstate

痛点： 页面刷新后状态丢失

npm install pinia-plugin-persistedstate

// main.ts
import { createPinia } from'pinia'
import piniaPluginPersistedstate from'pinia-plugin-persistedstate'

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

// store 配置
exportconst useUserStore = defineStore('user', {
  state: () => ({ token: '' }),
  persist: {
    storage: sessionStorage, // 指定存储方式
    paths: ['token'] // 选择持久化字段
  }
})

适用场景：

• 保持用户登录状态
• 记住表格筛选条件
• 保存用户主题偏好

二、状态重置插件：pinia-plugin-reset

痛点： 手动重置复杂状态容易遗漏

import { createReset } from 'pinia-plugin-reset'

// 初始化
pinia.use(createReset())

// 使用示例
const store = useUserStore()
store.$reset() // 一键重置到初始状态

**适用场景：

• 用户退出登录时清理数据
• 表单提交后重置
• 测试用例的初始状态设置

三、防抖操作插件：@pinia/plugin-debounce

顾名思义，防抖触发 pinia 更新，减少更新频率

import { debounce } from 'ts-debounce'
import { PiniaDebounce } from '@pinia/plugin-debounce'

// Pass the plugin to your application's pinia plugin
pinia.use(PiniaDebounce(debounce))

defineStore(
  'id',
() => {
    // ...the store

    return { someSearch }
  },
  {
    debounce: {
      // 防抖
      someSearch: 300,
    },
  }
)

四、映射操作插件：pinia-orm

通过映射关系来操作 pinia

import { createPinia } from 'pinia'
import { createORM } from 'pinia-orm'
const pinia = createPinia().use(createORM())

// User Model

import { Model } from'pinia-orm'

exportdefaultclass User extends Model {
// entity is a required property for all models.
static entity = 'users'

// List of all fields (schema) of the post model. `this.string()` declares
// a string field type with a default value as the first argument.
// `this.uid()` declares a unique id if none provided.
static fields () {
    return {
      id: this.uid(),
      name: this.string(''),
      email: this.string('')
    }
  }
// For typescript support of the field include also the next lines
declare id: string
declare name: string
declare email: string
}

五、撤销/重置插件：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()

// undo/redo have no effect if we're at the
// beginning/end of the stack
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 }

六、SSR 支持：@pinia/nuxt

npm install @pinia/nuxt

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

// 自动处理：  
// - 服务端数据预取  
// - 客户端状态同步  
// - 避免 hydration 错误

七、开发调试插件：vue-devtools 增强

内置支持： 通过浏览器插件直接查看

调试技巧：

• 时间旅行调试（状态回滚）
• 直接修改 store 状态
• 跟踪状态变更来源