mcpField
P
pinia

pinia

github.com/uni-helper開発111673 回インストール39 週間前に更新
リポジトリ

pinia について

Vue 開発者向けの Pinia v3.0.4 スキルです。状態管理、ストア、TypeScript、開発者ツールを解説し、テスト、サーバーサイドレンダリング、ストアの合成も扱います。

主な機能

  1. 01ストア、状態、ゲッター、アクション
  2. 02Options API と Composition API のスタイル
  3. 03プラグインとコンポーザブル
  4. 04ストアの合成とサブスクリプション
  5. 05@pinia/testing によるテスト
  6. 06SSR、Nuxt、HMR

活用シーン

  1. 01Vue アプリの状態構成
  2. 02複数ストア間でのロジック共有
  3. 03モックストアを使ったコンポーネントテスト
  4. 04SSR の状態ハイドレーション管理

インストール

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

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

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

同梱ファイル

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

GENERATION.md
LICENSE.md
SYNC.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 対応