AGENT SKILL

vue-pinia-best-practices

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

01 前言 Front Matter

name: vue-pinia-best-practices
author: github.com/vuejs-ai
license: MIT
version: 1.0.0
description: Pinia stores, state management patterns, store setup, and reactivity with stores.

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

层级 AGENTS.md / README.md：init、update、audit、reorganize、trim。初始化 Agent 指令、代码改动后同步文档、检查文档漂移、重组仓库文档层级、精简规则与 Skills。 Not for 写业务代码或生成文档站点。

Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.

Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.

JSX syntax in Vue (e.g., class vs className, JSX plugin config).