vue-pinia-best-practices — скилл для Claude Code: Pinia и управление
Скилл с лучшими практиками Pinia: как избежать ошибок при настройке хранилищ, сохранить реактивность и правильно организовать state management в Vue-проекте.
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a claude-codeЧто делает vue-pinia-best-practices
Скилл собирает типичные проблемы при работе с Pinia и показывает, как их решать. Внутри — рекомендации по настройке хранилищ (setup stores), работе с реактивностью при деструктуризации, привязке методов в шаблонах и управлению состоянием фильтров. Каждая проблема ссылается на подробное объяснение: например, если десструктурирование хранилища ломает реактивность, скилл укажет на правильный подход.
Скилл включает паттерны для больших приложений с DevTools и лучшие практики, чтобы код был предсказуем и легче масштабировался.
Какие задачи решает
- Избежать ошибки «getActivePinia was called» при старте приложения
- Сохранить реактивность при деструктуризации хранилища
- Настроить setup stores так, чтобы DevTools видел всё состояние
- Правильно вызывать методы хранилища в шаблонах
- Организовать управление фильтрами и эфемерным состоянием
Примеры запросов агенту
- Подскажи, почему при деструктуризации хранилища UI не обновляется
- Как настроить Pinia для production-приложения с DevTools
- У меня ошибка getActivePinia was called при инициализации — что не так
Как установить vue-pinia-best-practices
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a claude-code2Вручную: положить файлы
~/.claude/skills/vue-pinia-best-practices/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vue-pinia-best-practices/
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a codex2Вручную: положить файлы
.agents/skills/vue-pinia-best-practices/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a cursor2Вручную: положить файлы
.cursor/skills/vue-pinia-best-practices/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vuejs-ai/skills vue-pinia-best-practices2Вручную: положить файлы
.github/skills/vue-pinia-best-practices/SKILL.md1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a gemini-cli2Командой платформы
gemini skills install https://github.com/vuejs-ai/skills --path skills/vue-pinia-best-practicesВручную: положить файлы
.devin/skills/vue-pinia-best-practices/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора3
Весь набор →Похожие
Вопросы о vue-pinia-best-practices
Как установить vue-pinia-best-practices в Claude Code?
Выполни npx skills add vuejs-ai/skills --skill vue-pinia-best-practices -a claude-code, потом открой ~/.claude/skills/vue-pinia-best-practices/SKILL.md.
Что такое vue-pinia-best-practices?
Это скилл с лучшими практиками Pinia для Vue 3. Содержит рекомендации по настройке хранилищ, реактивности, привязке методов и паттернам управления состоянием.
Когда нужна реактивная привязка к хранилищу, а когда можно деструктурировать?
Деструктуризация хранилища ломает реактивность. Чтобы сохранить реактивность в шаблоне, либо используй хранилище целиком (store.count), либо оборачивай в computed() в скрипте.
Исходный текст
SKILL.md · MIT
--- name: vue-pinia-best-practices description: "Pinia stores, state management patterns, store setup, and reactivity with stores." version: 1.0.0 license: MIT author: github.com/vuejs-ai --- Pinia best practices, common gotchas, and state management patterns. ### Store Setup - Getting "getActivePinia was called" error at startup → See [pinia-no-active-pinia-error](reference/pinia-no-active-pinia-error.md) - Setup stores missing state in DevTools or SSR → See [pinia-setup-store-return-all-state](reference/pinia-setup-store-return-all-state.md) ### Reactivity - Store destructuring stops updating UI reactively → See [pinia-store-destructuring-breaks-reactivity](reference/pinia-store-destructuring-breaks-reactivity.md) - Store methods lose context in template calls → See [store-method-binding-parentheses](reference/store-method-binding-parentheses.md) ### State Patterns - Filters reset on refresh or can't be shared → See [state-url-for-ephemeral-filters](reference/state-url-for-ephemeral-filters.md) - Building production app without DevTools or conventions → See [state-use-pinia-for-large-apps](reference/state-use-pinia-for-large-apps.md)
© github.com/vuejs-ai · MIT · vuejs-ai/skills