mcpField
P
pinia

pinia

github.com/onmax開発722304 回インストール1 日前に更新
リポジトリ

pinia について

Vue 開発者向けの Pinia スキルです。ストアの設計からテスト、SSR、Nuxt まで、状態管理ライブラリの利用方法を扱います。

主な機能

  1. 01ストア定義と状態管理
  2. 02プラグインとストアの合成
  3. 03テストとコンポーネント外での利用
  4. 04SSR、Nuxt、HMR のガイド

活用シーン

  1. 01Vue アプリのストア設計
  2. 02Pinia を使うコンポーネントのテスト
  3. 03SSR または Nuxt プロジェクトでの状態管理

インストール

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

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

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

同梱ファイル

SKILL.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 を第一級にサポートするとともに、開発者ツールと統合されています。

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

コアリファレンス

トピック説明リファレンス
ストアストアの定義、状態、ゲッター、アクション、storeToRefs、サブスクリプションcore-stores

機能

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

ベストプラクティス

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

高度なトピック

トピック説明リファレンス
SSRサーバーサイドレンダリング、状態のハイドレーションadvanced-ssr
NuxtNuxt との統合、自動インポート、SSR のベストプラクティスadvanced-nuxt
HMR開発用のホットモジュール置換advanced-hmr

主な推奨事項

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

コメント

Markdown 対応