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

科技分類資訊推薦

從聊天機器人到協作夥伴:AI智能體如何重塑企業工作 - 天天要聞

從聊天機器人到協作夥伴:AI智能體如何重塑企業工作

Scott White至今仍對人工智慧從新奇技術轉變為真正工作夥伴的速度感到驚嘆。僅僅一年多前,這位Anthropic公司Claude AI產品負責人目睹了早期AI編程工具甚至無法完成一行代碼的窘境。如今,儘管並非專業程序員,他卻能親自構建
小米 16 系列迎最新爆料,Pro 系列鏡頭模組大改,橫向延伸全尺寸設計 - 天天要聞

小米 16 系列迎最新爆料,Pro 系列鏡頭模組大改,橫向延伸全尺寸設計

近日,包括數碼閑聊站在內等多個消息源,就下一代旗艦新機紛紛進行了最新爆料,其中小米 16 系列也在近日迎來了最新消息。根據最新爆料來看,小米 16 系列將會在以往的標準版、Pro 版、Ultra 的基礎上新增一款 Pro Max 型號。但一一對應來看,新款的小米 16 Pro 即對標標準版 , 為大家熟悉的 6.3 英寸小尺寸旗艦機型。而 1...
魅族 22 系列手機本月到來,提供全新開模小尺寸旗艦版本 - 天天要聞

魅族 22 系列手機本月到來,提供全新開模小尺寸旗艦版本

伴隨著時間來到 7 月,各大手機廠商的新機更新計劃有所放緩,不過根據多方爆料來看,「小廠代表」 星紀魅族旗下的魅族 22 系列將會在本月與大家見面。目前魅族 22 系列仍然十分 「神秘」,欠缺主要的配置爆料與外觀圖片作為參考。但根據部分什麼爆料者的消息來看,魅族 22 系列將會全新開模,並提供小尺寸旗艦版本可供選擇...
vivo X300 Pro 更多細節曝光,大 R 角直面屏,新款大底主攝方案加持 - 天天要聞

vivo X300 Pro 更多細節曝光,大 R 角直面屏,新款大底主攝方案加持

今天數碼博主數碼閑聊站在與網友互動中,透露了一款搭載聯發科天璣 9500 的 「大杯」 工程機的最新進展。參考爆料內容與評論區互動來看,預計為 vivo X300 Pro。除搭載聯發科天璣 9500 外,據悉該機一大變化之處在於屏幕部分,根據最新消息來看將會搭載一塊大 R 角直屏,不再採用曲面屏或微曲面屏設計。而這也將成為下一代...
數據驅動,柔性智能建造平台助力高效管理 - 天天要聞

數據驅動,柔性智能建造平台助力高效管理

長沙晚報掌上長沙7月1日訊(全媒體記者 劉嘉)6月30日,由長沙市智能建造產業鏈推進辦公室與中建五局三公司聯合承辦的「創新驅動 智建未來」科技活動舉行。該活動不僅展示了長沙在智能建造領域的創新成果,也為行業高質量發展提供了可複製的實踐經驗。
以前不敢想,機械革命搭配出4959元的RTX5050本,還有2.5K屏 - 天天要聞

以前不敢想,機械革命搭配出4959元的RTX5050本,還有2.5K屏

最近RTX5050本開始大面積登場,很多消費者也想知道,廠商到底能搭配出什麼樣配置?結果機械革命沒有讓大家失望,搭配出一個6199元的新品,補貼後價格4959元,再一次刷新新顯卡筆記本的價格新低。同時,其配置還不是很潦草,還是很平衡的,讓我們來看看。這款本配置了R9 7845HX處理器,12核心,24線程,台積電5nm工藝,Zen4...
中國移動三大核心布局 助力南亞東南亞數字經濟新發展 - 天天要聞

中國移動三大核心布局 助力南亞東南亞數字經濟新發展

【來源:雲南網】6月30日,由雲南省人民政府和雲南省工業和信息化廳聯合舉辦的面向南亞東南亞數字合作推介會在北京舉行,中國移動副總經理陳懷達出席,中國移動數智化部副總經理陶濤發表主題為《建設跨境數據交易高速公路,服務數字信息大通道建設》的演講