Pinia 是什麼？Vue 官方推薦的狀態管理工具全攻略
在開發 Vue 專案時，如何高效管理跨元件的資料一直是核心課題。Pinia 作為 Vue 的官方推薦狀態管理工具（State Management Tool），已正式取代 Vuex 成為開發者的首選方案。它不僅設計更簡潔，更完美契合 Vue 3 的 Composition API 生態。
為什麼需要 Pinia 或 Vuex？
在小型專案中，您可以用 props 傳資料、emit 傳事件、provide/inject、composable。但當專案變大時會出現問題，如: 多層元件傳 props 很痛苦、多個頁面需要共用資料、API 資料需要快取、使用者登入狀態需要全域共享、多個模組之間要互相影響。這時候就需要一個 集中管理狀態 的工具 Pinia 或 Vuex。
這時，集中管理狀態（Global State Management） 的工具如 Pinia 就能發揮作用，將資料與邏輯抽離，讓專案結構更清晰。
Pinia vs. Vuex：為什麼您該選擇 Pinia？
雖然 Vuex 在 Vue 2 時代是主流，但在 Vue 3 推出後，官方更推薦使用 Pinia。以下是兩者的直觀比較：
| 比較項目 | Pinia(推薦) | Vuex |
|---|---|---|
| 語法設計 | 簡潔、直覺 | 較為冗長複雜 |
| Mutation | 不需要 (直接在 action 修改) | 必須 (區分同步與非同步) |
| TypeScript | 原生支援，體驗極佳 | 設定較麻煩，型別推導不完整 |
| 結構彈性 | 高，支援多個 Store 平級管理 | 嚴格，模組巢狀結構複雜 |
| 適用版本 | Vue 3 (最佳) / Vue 2 | Vue2 為主 |
Pinia 的核心概念：state、getters、actions
store 是保存全域狀態的實體，您可以把它想像成一個「不帶 UI 的元件」。它由三個核心部分組成：
- state：定義資料的地方（類似元件的 data）。
- getters：計算屬性，根據 state 衍生出的資料（類似元件的 computed）。
- actions：修改資料的方法，支援 同步 與 非同步 操作（類似元件的 methods）。
store 檔案結構建議
為了保持程式碼的可維護性，建議在 src/stores 資料夾下，依據功能領域拆分不同的 store 檔案：
src/
├─ stores/
│ ├─ user.js # 使用者登入、權限
│ ├─ cart.js # 購物車內容
│ └─ product.js # 產品清單、快取
├─ App.vue
└─ main.js如何開始使用 Pinia？
安裝套件
使用 npm 即可輕鬆安裝：
bash
npm install pinia
# 或簡寫
npm i pinia在專案中註冊 (main.js)
在 Vue 入口檔案中引入並掛載 Pinia
js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount("#app");總結
Pinia 的出現大幅簡化了 Vue 開發者的工作流程，透過更現代化的 API 設計與 TypeScript 的加持，它已成為 Vue 生態系中不可或缺的一環。如果您正準備開啟一個新的 Vue 3 專案，Pinia 絕對是您的不二之選。