mcpField
P
pinia

pinia

github.com/liangmiqwq開発139 回インストール2 日前に更新
リポジトリ

pinia について

Vue アプリケーション開発者向けの Pinia リファレンススキルです。Store の設計、テスト、SSR、Nuxt、開発ワークフローを扱い、型安全性とリアクティブな利用方法を示します。

主な機能

  1. 01Store の定義と合成
  2. 02プラグインとコンポーザブル
  3. 03Store のテストとモック
  4. 04SSR と状態のハイドレーション
  5. 05Nuxt と HMR のガイダンス

活用シーン

  1. 01Vue アプリケーションの Store 設計
  2. 02モック Store を使ったコンポーネントテスト
  3. 03ナビゲーションガードでの Store 利用
  4. 04SSR の状態ハイドレーション対応

インストール

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

$npx skills add https://github.com/liangmiqwq/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 対応