Piniaでのステート管理はどのように動作しますか？

Question

Accepted Answer

**Pinia** は Vue の公式ステート管理ライブラリ（Vuex の後継）です。多くのコンポーネント間で共有する必要があるステートの集中化された **store** であり、Composition API 上に構築されたシンプルで型安全な API を備えています。 ## ストアの定義 ```js // stores/counter.js import { defineStore } from "pinia"; import { ref, computed } from "vue"; export const useCounterStore = defineStore("counter", () => { // state const count = ref(0); // getters (derived state) = computed const double = computed(() => count.value * 2); // actions (methods that mutate state) function increment() { count.value++; } async function fetchInitial() { count.value = await api.getCount(); } return { count, double, increment, fetchInitial }; }); ``` この「setup store」はコンポーザブルとまったく同じように見えます。ステートには `ref`、ゲッターには `computed`、アクションには関数を使うため、Composition API を知っていれば直感的です。 ## コンポーネント内でストアを使う ```vue ``` **重要：** **ステート/ゲッター** を分割代入するときは `storeToRefs` を使用してください。通常の分割代入はリアクティビティを失います（`reactive` と同じリアクティビティの注意事項）。アクションは不要です。 ## Pinia を Vuex より選ぶ理由 ```text ✓ No mutations boilerplate — actions can mutate state directly ✓ Excellent TypeScript inference (Vuex was painful to type) ✓ Modular by design — many small stores, no nested-module complexity ✓ Composition-API-native, tiny API, devtools support ``` ## ストア vs props/コンポーザブルの使い分け ```text props/emits → parent ↔ child provide/inject → share within a subtree Pinia store → GLOBAL/app-wide shared state (auth user, cart, settings) accessed by many unrelated components ``` ## なぜ重要なのか Pinia は Vue アプリケーションの **グローバルで共有されるステート** の標準的なソリューションです。ユーザー/認証、ショッピングカート、アプリ設定、キャッシュデータなど、多くの離れたコンポーネントが一貫して読み取り、更新する必要があるものです。コンポーザブル形式の API、ファーストクラスの TypeScript サポート、Vuex のボイラープレートの廃止により、推奨される選択肢となっています。ステートが本当にグローバルな場合に Pinia を選択し（vs props/inject）、分割代入時にリアクティビティを保つために `storeToRefs` を使用することが、正しい使用方法の核です。