Pinia 最新發(fā)布的六個(gè)插件，效率提升 300%！

作者：林三心不學(xué)挖掘機(jī) 2025-05-16 09:15:30

Pinia 作為 Vue 官方推薦的狀態(tài)管理庫(kù)，其插件機(jī)制能有效擴(kuò)展核心功能，覆蓋?數(shù)據(jù)持久化、性能優(yōu)化、開發(fā)調(diào)試、類型安全?等常見需求。

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

Pinia 作為 Vue 官方推薦的狀態(tài)管理庫(kù)，其插件機(jī)制能有效擴(kuò)展核心功能，覆蓋數(shù)據(jù)持久化、性能優(yōu)化、開發(fā)調(diào)試、類型安全等常見需求

一、數(shù)據(jù)持久化插件：pinia-plugin-persistedstate

痛點(diǎn)：頁(yè)面刷新后狀態(tài)丟失

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, // 指定存儲(chǔ)方式
    paths: ['token'] // 選擇持久化字段
  }
})

適用場(chǎng)景：

保持用戶登錄狀態(tài)
記住表格篩選條件
保存用戶主題偏好

二、狀態(tài)重置插件：pinia-plugin-reset

痛點(diǎn)：手動(dòng)重置復(fù)雜狀態(tài)容易遺漏

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

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

// 使用示例
const store = useUserStore()
store.$reset() // 一鍵重置到初始狀態(tài)

**適用場(chǎng)景：

用戶退出登錄時(shí)清理數(shù)據(jù)
表單提交后重置
測(cè)試用例的初始狀態(tài)設(shè)置

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

顧名思義，防抖觸發(fā) 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

通過映射關(guān)系來操作 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']
})

// 自動(dòng)處理：  
// - 服務(wù)端數(shù)據(jù)預(yù)取  
// - 客戶端狀態(tài)同步  
// - 避免 hydration 錯(cuò)誤

七、開發(fā)調(diào)試插件：vue-devtools 增強(qiáng)

內(nèi)置支持：通過瀏覽器插件直接查看

調(diào)試技巧：

時(shí)間旅行調(diào)試（狀態(tài)回滾）
直接修改 store 狀態(tài)
跟蹤狀態(tài)變更來源

責(zé)任編輯：武曉燕來源：前端之神

插件 Vue Pinia