skills.rest
hello-lizhihua
hello-lizhihuaCOMMUNITY
Explore all skills by this author →
GitHub

vue-pinia-best-practices

Document Pinia best practices for Vue 3 setup stores and reactivity.

Updated Aug 27, 2026
Search Tags:#best-practices#state-management#vue3#gotchas#pinia#storeToRefs#setup-stores
One-click install
npx skills add https://github.com/hello-lizhihua/skills_zh-CN --skill vue-pinia-best-practices-hello-lizhihua
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-pinia-best-practices
Source: https://github.com/hello-lizhihua/skills_zh-CN/tree/main/vue-skills/cn/skills/vue-pinia-best-practices
Command: npx skills add https://github.com/hello-lizhihua/skills_zh-CN --skill vue-pinia-best-practices-hello-lizhihua

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes reference (resource) components.

What problem does it solve?

This Skill helps Vue developers avoid common Pinia pitfalls by documenting best practices for store setup, reactivity, and template usage.

Core Features & Use Cases

  • Best practices for setting up Pinia stores (setup stores) to ensure SSR compatibility and DevTools visibility.
  • Correct usage of storeToRefs and avoiding dangerous direct destructuring that breaks reactivity.
  • Guidance for migrating from Vuex or legacy patterns and common template binding gotchas.

Quick Start

Create a setup-style Pinia store that returns all state, expose getters and actions, and bind state to templates using storeToRefs. Then validate a scenario with a component reading and mutating store state to confirm reactivity remains intact.

Frequently Asked Questions about vue-pinia-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why does Pinia state lose reactivity when I destructure it in Vue 3?▼

Destructuring Pinia state breaks reactivity because Vue loses the reactive proxy reference. Use the storeToRefs helper to extract state and getters safely while preserving reactive bindings in your Vue 3 components.

How do I set up a Pinia store for SSR compatibility and DevTools visibility?▼

Use setup stores in Pinia to ensure SSR compatibility and DevTools visibility. Define state as refs, expose getters as computed properties, and return all state and actions from the setup function.

What is the best way to migrate from Vuex to Pinia in Vue 3?▼

Migrating from Vuex to Pinia involves replacing mutations with direct actions and using setup stores for state management. Apply storeToRefs for template bindings to avoid common reactivity gotchas during the transition.

Can I call Pinia store actions directly at the top level of my Vue 3 application?▼

Avoid unsafe top-level Pinia store calls in Vue 3. Instantiate stores within component setup functions or lifecycle hooks to ensure the Pinia instance is properly mounted before accessing state or actions.

How do I bind Pinia state to my Vue 3 template without breaking reactivity?▼

Bind Pinia state to Vue 3 templates using storeToRefs to maintain reactivity. Access actions directly from the store instance for event handling rather than destructuring them alongside state properties.

Related Skills

Explore More Software Engineering Skills→
uni-helperuni-helper
95

pinia

Manage Vue 3 app state with type-safe Pinia stores.

Official
Intermediate
NKDShinKuNKDShinKu

vue-pinia-best-practices

Consolidate Pinia best practices for Vue 3 store setup and reactivity.

Community
Intermediate
stevessrstevessr

vue-pinia-best-practices

Configure Pinia stores in Vue 3 apps to prevent setup timing errors.

Community
Intermediate
peterWang123589peterWang123589

pinia

Define Pinia stores with state, getters, and actions for Vue applications.

Community
Intermediate