Pinia 最新發佈的 6 個插件,效率提升 300%!

2025年05月17日09:13:06 科技 1728

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

Pinia 最新發佈的 6 個插件,效率提升 300%! - 天天要聞

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 狀態
  • 跟蹤狀態變更來源

科技分類資訊推薦

獲巨額雲計算合同!甲骨文股價創新高 - 天天要聞

獲巨額雲計算合同!甲骨文股價創新高

智通財經APP獲悉,甲骨文(ORCL.US)表示,該公司已簽署一項年收入高達300億美元的單一雲計算服務合同,這一金額已超過其當前整個雲基礎設施業務的規模。受該消息推動,甲骨文股價周一早盤一度上漲8.6%,創下盤中歷史新高,收盤漲近4%。今年以來,甲骨文股價已累計上漲約32%。甲骨文在周一提交的一份監管文件中披露,這筆收入...
中金:運營商配合意願亟待提升 eSIM熱度有望重啟 - 天天要聞

中金:運營商配合意願亟待提升 eSIM熱度有望重啟

智通財經APP獲悉,中金發佈研報稱,根據GSMA Intelligence預測,至2025年底,全球預計將有約10億eSIM智能手機連接,2030年將增長至69億,隨着消費電子輕薄化、可穿戴設備以及物聯網終端漫遊需求增加,eSIM的應用有望在2025年加速。但eSIM的應用落地仍面臨運營商配合意願度不高的阻力,支持終端數量有限。eSIM卡具備小尺寸、...
網易騰訊發佈暑期限玩日曆:未成年人每周限玩3小時 - 天天要聞

網易騰訊發佈暑期限玩日曆:未成年人每周限玩3小時

隨着暑期來臨,未成年人網絡使用需求顯著上升。為防止未成年人沉迷遊戲,6月30日,網易遊戲、騰訊遊戲分別發佈了2025年暑期未成年人限玩日曆(7月1日-8月31日),兩家企業均採取嚴格時段限制措施,規則基本一致。
「閃燈即推+邊推邊開」!太原機場開啟高效運行新模式 - 天天要聞

「閃燈即推+邊推邊開」!太原機場開啟高效運行新模式

近日,東航MU5273航班在T2站坪順利完成「閃燈即推+邊推邊開」新流程操作,這標誌着航空器地面高效運行新模式在太原國際機場有限責任公司正式投入應用。資料圖 據介紹,太原機場公司二跑道預計在2025年底正式投運。經模擬機測算,航空器地面滑行距離、滑行時間將顯著增加。不僅直接衝擊航班正常性,也將極大影響機場整體運行...