vue-pinia-best-practices について
Vue開発者やコーディングエージェント向けのPiniaベストプラクティススキルです。Store、リアクティビティ、状態管理のよくある問題を取り上げ、SSR、DevTools、URLを使った一時的なフィルター状態も扱います。
主な機能
- 01Pinia未アクティブエラーの診断
- 02setup storeの全状態の返却
- 03分割代入時のリアクティビティ維持
- 04テンプレートでのStoreメソッドのバインド
- 05フィルターと大規模アプリの状態パターン
活用シーン
- 01Piniaの起動エラーの修正
- 02分割代入したStore値のリアクティブな維持
- 03SSRやDevToolsでのsetup storeの調査
- 04共有可能なフィルター状態のURL保存
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/vue-pinia-best-practicesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
reference/pinia-no-active-pinia-error.mdpinia-setup-store-return-all-state.mdpinia-store-destructuring-breaks-reactivity.mdstate-url-for-ephemeral-filters.mdstate-use-pinia-for-large-apps.mdstore-method-binding-parentheses.md詳細
Pinia のベストプラクティス、よくある落とし穴、状態管理のパターンです。
ストアの設定
- 起動時に「getActivePinia was called」エラーが発生する → pinia-no-active-pinia-errorを参照してください
- セットアップストアの状態が DevTools または SSR に表示されない → pinia-setup-store-return-all-stateを参照してください
リアクティビティ
- ストアを分割代入すると、UI のリアクティブな更新が停止する → pinia-store-destructuring-breaks-reactivityを参照してください
- テンプレート内でメソッドを呼び出すと、ストアメソッドのコンテキストが失われる → store-method-binding-parenthesesを参照してください
状態のパターン
- 更新時にフィルターがリセットされる、または共有できない → state-url-for-ephemeral-filtersを参照してください
- DevTools や規約を使わずに本番アプリを構築する → state-use-pinia-for-large-appsを参照してください
コメント
Markdown 対応