mcpField
P
pinia

pinia

github.com/antfu開発6.0k19.9k 回インストール6 日前に更新
リポジトリ

pinia について

Vue アプリケーションの状態管理に関するリファレンスと推奨事項をまとめた Pinia スキルです。Store、プラグイン、合成、テスト、SSR、Nuxt、HMR に加え、TypeScript と devtools のサポートも扱います。

主な機能

  1. 01Store の定義、状態、Getter、Action
  2. 02プラグインと Store の合成
  3. 03テストとコンポーネント外での利用
  4. 04SSR、Nuxt、HMR のガイド
  5. 05リアクティブな Store の利用推奨事項

活用シーン

  1. 01Vue アプリの状態管理の構成
  2. 02Store の合成とコンポーザブルの利用
  3. 03状態をモックした Store のテスト
  4. 04Nuxt や SSR での Store 管理

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/antfu/skills --skill pinia

インストール後、Claude Code で/piniaを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

GENERATION.md
references/
advanced-hmr.md
advanced-nuxt.md
advanced-ssr.md
best-practices-outside-component.md
best-practices-testing.md
core-stores.md
features-composables.md
features-composing-stores.md
features-plugins.md

詳細

Pinia

Pinia は Vue の公式状態管理ライブラリで、直感的に使え、型安全性を備えるように設計されています。Options API と Composition API の両方のスタイルをサポートし、TypeScript のファーストクラスサポートと Devtools 連携を提供します。

このスキルは Pinia v4.0.3 に基づいており、2026-09-25 に生成されました。

コアリファレンス

トピック説明リファレンス
ストアストア、state、getters、actions、storeToRefs、サブスクリプションの定義core-stores

機能

拡張性
トピック説明リファレンス
プラグインカスタムプロパティ、state、動作でストアを拡張しますfeatures-plugins
コンポーザビリティ
トピック説明リファレンス
コンポーザブルストア内で Vue のコンポーザブル（VueUse など）を使用しますfeatures-composables
ストアの合成ストア間の通信、循環依存の回避features-composing-stores

ベストプラクティス

トピック説明リファレンス
テスト@pinia/testing を使ったユニットテスト、モック、スタブbest-practices-testing
コンポーネント外での使用ナビゲーションガード、プラグイン、ミドルウェアでのストアの使用best-practices-outside-component

高度なトピック

トピック説明リファレンス
SSRサーバーサイドレンダリング、state のハイドレーションadvanced-ssr
NuxtNuxt 連携、自動インポート、SSR のベストプラクティスadvanced-nuxt
HMR開発時のホットモジュールリプレースメントadvanced-hmr

主な推奨事項

  • 複雑なロジック、コンポーザブル、ウォッチャーには Setup Store を優先してください
  • リアクティビティを維持するため、state/getters を分割代入するときは storeToRefs() を使用してください
  • actions は直接分割代入できます - ストアにバインドされています
  • ストアはモジュールスコープではなく関数内で呼び出してください。特に SSR では重要です
  • 開発体験を向上させるため、各ストアに HMR サポートを追加してください
  • モックしたストアを使うコンポーネントテストには @pinia/testing を使用してください

コメント

Markdown 対応