pinia

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用します。

• Vue 3 アプリケーションで Pinia による状態管理をセットアップする
• defineStore() でストアを作成する
• 状態、ゲッター、アクションを扱う
• Composition API で Pinia を使用する
• Options API で Pinia を使用する
• Pinia で SSR（サーバーサイドレンダリング）を実装する
• Pinia プラグインを作成して使用する
• コンポーネントでストアにアクセスする
• コンポーネント間で状態を共有する
• プラグインで状態を永続化する
• Pinia ストアをテストする
• Vuex から Pinia に移行する

このスキルの使い方

このスキルは、Pinia の公式ドキュメントの構成に沿って整理されています（https://pinia.vuejs.org/introduction.html、https://pinia.vuejs.org/core-concepts/、https://pinia.vuejs.org/api/）。Pinia を使う際は、次の手順に従ってください。

1. ユーザーのリクエストからトピックを特定します。

   • Introduction/紹介 → examples/introduction/
   • Core Concepts/核心概念 → examples/core-concepts/
   • Cookbook/レシピ → examples/cookbook/
   • SSR/サーバーサイドレンダリング → examples/ssr/
   • API Reference/API リファレンス → api/

2. examples/ ディレクトリから適切なサンプルファイルを読み込みます。

   Introduction（紹介） - examples/introduction/:

   • examples/introduction/introduction.md

   Core Concepts（コアコンセプト） - examples/core-concepts/:

   • examples/core-concepts/actions.md
   • examples/core-concepts/defining-a-store.md
   • examples/core-concepts/getters.md
   • examples/core-concepts/index.md
   • examples/core-concepts/outside-component-usage.md
   • examples/core-concepts/plugins.md
   • examples/core-concepts/state.md

   Cookbook（レシピ） - examples/cookbook/:

   • examples/cookbook/composables.md
   • examples/cookbook/composing-stores.md
   • examples/cookbook/hot-module-replacement.md
   • examples/cookbook/index.md
   • examples/cookbook/migration-v1-v2.md
   • examples/cookbook/migration-v2-v3.md
   • examples/cookbook/migration-vuex.md
   • examples/cookbook/options-api.md
   • examples/cookbook/testing.md
   • examples/cookbook/vscode-snippets.md

   SSR（サーバーサイドレンダリング） - examples/ssr/:

   • examples/ssr/index.md
   • examples/ssr/nuxt.md

3. 必要に応じて、api/ ディレクトリの API リファレンスドキュメントを参照します。

   Pinia Core API - api/pinia/:

   • api/pinia/enumerations/MutationType.md
   • api/pinia/functions/acceptHMRUpdate.md
   • api/pinia/functions/createPinia.md
   • api/pinia/functions/defineStore.md
   • api/pinia/functions/disposePinia.md
   • api/pinia/functions/getActivePinia.md
   • api/pinia/functions/mapActions.md
   • api/pinia/functions/mapState.md
   • api/pinia/functions/mapStores.md
   • api/pinia/functions/mapWritableState.md
   • api/pinia/functions/setMapStoreSuffix.md
   • api/pinia/index.md
   • api/pinia/interfaces/Store.md
   • api/pinia/interfaces/StoreActions.md
   • api/pinia/interfaces/StoreDefinition.md
   • api/pinia/interfaces/StoreGetters.md
   • api/pinia/interfaces/StoreProperties.md
   • api/pinia/interfaces/StoreState.md

   @pinia/nuxt - api/@pinia/nuxt/:

   • api/@pinia/nuxt/index.md
   • api/@pinia/nuxt/interfaces/ModuleOptions.md
   • api/@pinia/nuxt/variables/default.md

   @pinia/testing - api/@pinia/testing/:

   • api/@pinia/testing/functions/createTestingPinia.md
   • api/@pinia/testing/index.md
   • api/@pinia/testing/interfaces/TestingOptions.md
   • api/@pinia/testing/interfaces/TestingPinia.md

4. 構文、構成、ベストプラクティスについては、該当するサンプルファイルの具体的な指示に従います。

   重要な注意事項：

   • すべてのサンプルは Pinia のベストプラクティスに従っています
   • 該当する場合、サンプルには JavaScript 版と TypeScript 版の両方が含まれています
   • 各サンプルファイルには、パラメーター、戻り値、よくあるエラー、ベストプラクティス、使用例が含まれています
   • ベストプラクティスとよくあるパターンについては、必ずサンプルファイルを確認してください

5. 必要に応じて、公式ドキュメントを参照します。

   • Introduction: https://pinia.vuejs.org/introduction.html
   • Core Concepts: https://pinia.vuejs.org/core-concepts/
   • API Reference: https://pinia.vuejs.org/api/

ベストプラクティス

1. defineStore() を使用する：ストアの作成には常に defineStore() を使用します
2. ストアの命名：内容がわかりやすいストア ID を使用します
3. 状態の構造：可能な限り、状態をフラットで正規化された構造にします
4. ゲッター：状態から導出される計算値にはゲッターを使用します
5. アクション：非同期処理やミューテーションにはアクションを使用します
6. TypeScript：型安全性を確保するために TypeScript を使用します
7. ストアの構成：大きなストアは、機能を絞った小さなストアに分割します
8. SSR：サーバーサイドレンダリングには適切な SSR 設定を使用します
9. プラグイン：横断的な関心事にはプラグインを使用します
10. テスト：ストアとアクションのテストを作成します

リソース

• 公式ドキュメント：https://pinia.vuejs.org/
• はじめに：https://pinia.vuejs.org/introduction.html
• コアコンセプト：https://pinia.vuejs.org/core-concepts/
• API リファレンス：https://pinia.vuejs.org/api/
• GitHub リポジトリ：https://github.com/vuejs/pinia

キーワード

Pinia, 状態管理, ストア, Vue 3, Composition API, Options API, defineStore, state, getters, actions, plugins, SSR, サーバーサイドレンダリング, TypeScript, Vuex からの移行, 状態管理, ストレージ, コンポジション API, オプション API, プラグイン, サーバーサイドレンダリング, 型サポート