🛠️ 開発・MCP コミュニティ

vue-pinia-best-practices

Vue.jsのPiniaを使った状態管理のベストプラクティスやリアクティブなデータ操作を学ぶSkill。

📜 元の英語説明(参考)

Pinia stores, state management patterns, store setup, and reactivity with stores.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Vue.jsのPiniaを使った状態管理のベストプラクティスやリアクティブなデータ操作を学ぶSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

[Skill 名] vue-pinia-best-practices 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 を参照してください

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Pinia best practices, common gotchas, and state management patterns.

Getting "getActivePinia was called" error at startup → See pinia-no-active-pinia-error
Setup stores missing state in DevTools or SSR → See pinia-setup-store-return-all-state

Store destructuring stops updating UI reactively → See pinia-store-destructuring-breaks-reactivity
Store methods lose context in template calls → See store-method-binding-parentheses

Filters reset on refresh or can't be shared → See state-url-for-ephemeral-filters
Building production app without DevTools or conventions → See state-use-pinia-for-large-apps