mcpField
P
pinia

pinia

github.com/hairyf開発26119 回インストール4 週間前に更新
リポジトリ

pinia について

Vue の状態管理ライブラリ Pinia の使い方を案内するスキルです。Pinia v3.0.4 に基づき、Vue 開発者向けにストア設計、テスト、SSR、Nuxt、開発手法を扱います。

主な機能

  1. 01ストアの状態、ゲッター、アクション、購読
  2. 02プラグインとコンポーザブルの統合
  3. 03ストア構成と依存関係の指針
  4. 04@pinia/testing によるテスト
  5. 05SSR、Nuxt、HMR の案内

活用シーン

  1. 01Vue コンポーネント間で共有状態を構成
  2. 02Pinia ストアをモックしたコンポーネントテスト
  3. 03SSR または Nuxt アプリケーションでのストア利用

インストール

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

$npx skills add https://github.com/hairyf/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 と開発者ツールを優れた形でサポートしています。

このスキルは Pinia v3.0.4 に基づき、2026-01-28 に生成されました。

コアリファレンス

トピック説明リファレンス
ストアストア、状態、ゲッター、アクション、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 Stores を優先します
  • 状態やゲッターを分割代入する際は storeToRefs() を使用して、リアクティビティを維持します
  • アクションは直接分割代入できます - ストアにバインドされています
  • ストアはモジュールスコープではなく関数内で呼び出します。特に SSR では重要です
  • 開発体験を向上させるため、各ストアに HMR サポートを追加します
  • モックしたストアを使用するコンポーネントテストには @pinia/testing を使用します

コメント

Markdown 対応