Pinia
Pinia 是 Vue 的官方狀態管理庫，設計直觀且類型安全。它支援 Options API 和 Composition API 兩種風格，並具備一流的 TypeScript 支援與開發者工具整合。
此技能基於 Pinia v3.0.4，生成於 2026-01-28。
核心參考
| 主題 | 描述 | 參考文件 |
|---|---|---|
| Stores | 定義 Store、state、getters、actions、storeToRefs、訂閱 | core-stores |
功能
擴充性
| 主題 | 描述 | 參考文件 |
|---|---|---|
| 插件 | 使用自訂屬性、狀態和行為擴充 Store | features-plugins |
組合性
| 主題 | 描述 | 參考文件 |
|---|---|---|
| Composables | 在 Store 中使用 Vue composables（VueUse 等） | features-composables |
| 組合 Store | Store 之間的通訊，避免循環依賴 | features-composing-stores |
最佳實踐
| 主題 | 描述 | 參考文件 |
|---|---|---|
| 測試 | 使用 @pinia/testing 進行單元測試、模擬、樁測試 | best-practices-testing |
| 元件外部使用 | 在導航守衛、插件、中介軟體中使用 Store | best-practices-outside-component |
進階
| 主題 | 描述 | 參考文件 |
|---|---|---|
| SSR | 伺服端渲染、狀態水合 | advanced-ssr |
| Nuxt | Nuxt 整合、自動匯入、SSR 最佳實踐 | advanced-nuxt |
| HMR | 開發時熱模組替換 | advanced-hmr |
主要建議
- 優先使用 Setup Store 處理複雜邏輯、composables 和 watchers
- 使用
storeToRefs()解構 state/getters 以保持響應性 - Actions 可以直接解構 - 它們已綁定到 Store
- 在函式內部呼叫 Store 而不是模組頂層，特別是在 SSR 時
- 為每個 Store 加入 HMR 支援 以獲得更好的開發體驗
- 使用
@pinia/testing進行元件測試，搭配模擬 Store