vue-pinia-best-practices について
Vue 開発者向けに、Pinia の実践方法やよくある落とし穴、状態管理パターンをまとめたガイドです。ストア設定、リアクティビティ、アプリ状態の扱いを扱います。
主な機能
- 01Pinia 初期化エラーの調査
- 02Setup Store の状態返却要件
- 03分割代入によるリアクティビティ喪失の回避
- 04ストアメソッドの呼び出しコンテキスト
- 05URL を使ったフィルター状態の管理
- 06大規模アプリの状態管理パターン
活用シーン
- 01起動時の Pinia エラーの診断
- 02ストア分割代入後に UI が更新されない問題の修正
- 03更新後もフィルターを保持または共有
- 04大規模アプリの状態管理設計
インストール
コマンドをコピーしてターミナルで実行します。
$
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 対応