skills.rest
zuiaizengdada
zuiaizengdadaCOMMUNITY
Explore all skills by this author →
GitHub

vue-pinia-best-practices

Codify Pinia store patterns for Vue 3 projects.

9|Updated Sep 4, 2024
Search Tags:#best-practices#state-management#vue3#destructuring#pinia#store-patterns#setup-store
One-click install
npx skills add https://github.com/zuiaizengdada/uniapp_vue3_vite_pinia_template --skill vue-pinia-best-practices-zuiaizengdada
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-pinia-best-practices
Source: https://github.com/zuiaizengdada/uniapp_vue3_vite_pinia_template/tree/main/.agents/skills/vue-pinia-best-practices
Command: npx skills add https://github.com/zuiaizengdada/uniapp_vue3_vite_pinia_template --skill vue-pinia-best-practices-zuiaizengdada

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Pinia best practices and patterns to standardize Vue 3 store usage.

Core Features & Use Cases

  • Store setup conventions: defineStore patterns (setup vs options) and consistent state exposure.
  • Reactivity patterns: use storeToRefs, avoid destructuring state directly to preserve reactivity.
  • Common gotchas: proper this binding in templates, SSR considerations, and DevTools integration.
  • Use cases: teams building scalable apps with Pinia.

Quick Start

Follow the guide to set up a Pinia store in a Vue 3 project, review reference docs, and apply the recommended patterns to your existing stores.

Frequently Asked Questions about vue-pinia-best-practices

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

FAQPage Schema
What is the best way to structure Pinia stores in Vue 3?▼

To preserve reactivity when destructuring Pinia store state, use the storeToRefs helper instead of directly destructuring. This prevents common gotchas related to lost reactivity and proper this binding in templates.

How do I set up a Pinia store using the setup syntax?▼

To set up a Pinia store using the setup syntax, use the defineStore function with the setup pattern. This codifies your Vue 3 store architecture, standardizing state management across components and tooling for modern projects.

Does Pinia work with Vue 3 SSR and DevTools?▼

Yes, Pinia works with Vue 3 SSR and DevTools integration. Standardized store patterns address SSR considerations and ensure proper tooling integration for consistent architecture across your application.

Why does destructuring Pinia state break reactivity in Vue 3?▼

Destructuring Pinia state directly breaks reactivity because primitive values lose their reactive connection. Using storeToRefs safely destructures state while preserving reactivity, avoiding common Vue 3 gotchas.

Related Skills

Explore More Software Engineering Skills→
yuhle-qugyuhle-qug

vue-expert

Diagnose Vue 3 Composition API, reactivity, and Nuxt.js integration issues.

Community
Advanced
UmmItKinUmmItKin

pinia

Create and use Pinia stores in Vue apps with defineStore.

Community
Intermediate
ElderEvilElderEvil

vue-best-practices

Codify Vue 3 best practices for Composition API, TypeScript, and SSR projects.

Community
Advanced
AratKruglikAratKruglik
9

vue-state-management

Guide Vue 3 developers in selecting state management approaches for SPAs.

Community
Advanced