SKILL.md
readonlyread-only
name
pinia
description
Pinia 官方 Vue 狀態管理函式庫，型別安全且可擴充。用於定義 store、操作 state/getters/actions，或在 Vue 應用程式中實作 store 模式。
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 進行單元測試、模擬、stub | best-practices-testing |
| 元件外部 | 在導航守衛、外掛、中介軟體中使用 store | best-practices-outside-component |
進階
| 主題 | 說明 | 參考 |
|---|---|---|
| SSR | 伺服器端渲染、狀態水合 | advanced-ssr |
| Nuxt | Nuxt 整合、自動匯入、SSR 最佳實務 | advanced-nuxt |
| HMR | 開發時的熱模組替換 | advanced-hmr |
關鍵建議
- 偏好 Setup Stores 用於複雜邏輯、composables 與 watcher
- 使用
storeToRefs()解構 state/getters 以保持響應性 - Actions 可以直接解構 — 它們已綁定到 store
- 在函式內部呼叫 store，不要在模組作用域中，特別是 SSR 時
- 為每個 store 加入 HMR 支援 以獲得更好的開發體驗
- 使用
@pinia/testing進行元件測試，搭配模擬 store
