pinia

Pinia 是 Vue.js 官方推薦且具備型別安全的狀態管理函式庫，專為現代應用程式架構的直觀性與可擴展性而設計。本技能為 AI 代理提供了關於 Pinia 核心模式的深層領域知識，涵蓋 Options API 與 Composition API 的 Store 定義風格。它能協助開發者組織全域應用狀態、處理複雜的業務邏輯，並確保與 Vue 響應式系統的無縫整合。

本技能使 AI 代理能夠作為 Vue 開發者的技術顧問，協助優化狀態管理模式、解決 Store 間通訊中的循環依賴問題，並實作諸如插件擴充與伺服器端渲染 (SSR) 水合等進階功能。無論您是從 Vuex 遷移、建構大型 Nuxt 應用程式，還是進行 Store 單元測試，本技能都能提供維護程式碼乾淨、易於維護與測試所需的背景資訊。

• 使用 defineStore (Setup 或 Options 風格) 定義 Store，並提供完整的 TypeScript 支援。

• 透過 storeToRefs() 在解構 State 與 Getters 時保持響應式特性。

• 在 Store 內部管理副作用、非同步操作與複雜業務邏輯。

• 直接在 Store 邏輯中整合 VueUse Composable 與 Vue 內部響應式工具。

• 實作 Store 插件以透過自定義屬性或狀態持久化來擴充功能。

• 設定適合 SSR 的狀態水合機制與開發階段的熱模組替換 (HMR)。

• 最佳實踐：針對複雜邏輯、監聽器與依賴注入，優先使用 Setup Stores。

• 最佳實踐：保持 Store 模組化；避免建立單一巨大的全域 Store。

• 使用技巧：使用 @pinia/testing 對取用 Store 的元件進行單元測試，並在適當時使用 Mock 與 Stub。

• 限制：確保所有 Store Action 皆在 setup 函式或元件中呼叫；避免在模組作用域 (Module Scope) 直接呼叫 Store，特別是在 SSR 環境下。

• 輸入/輸出：代理程式預期會接收有關 Vue 元件、Store 定義或架構需求的背景資訊，並輸出優化的程式碼、設定片段與架構建議。