pinia

Define and manage Vue stores with defineStore, state, getters, and actions.

Updated Apr 6, 2022

Search Tags:#vue #state-management #types #ssr #pinia #nuxt #stores

Ready to run

npx skills add https://github.com/wjyugutou/study-test-demo --skill pinia-wjyugutou

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pinia
Source: https://github.com/wjyugutou/study-test-demo/tree/main/.trae/skills/pinia
Command: npx skills add https://github.com/wjyugutou/study-test-demo --skill pinia-wjyugutou

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a centralized, official approach to building and maintaining Vue stores with type-safety, addressing the complexity of managing state across components and enabling scalable patterns.

Core Features & Use Cases

Supports both Options API and Composition API store definitions with state, getters, and actions.
Enables store composition patterns, storeToRefs, and SSR-friendly usage in Vue/Nuxt apps.
Offers plugin support, devtools integration, and clear guidance for SSR hydration and advanced scenarios.

Quick Start

Install Pinia in your Vue project, create a basic setup store with defineStore, and consume it in components using the generated store hook.

Frequently Asked Questions about pinia

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

FAQPage Schema

How do I manage Vue state with Pinia using the Composition API?▼

Pinia supports both Options and Composition APIs for defining Vue stores using `defineStore`, handling state, getters, and actions. It enables store composition and `storeToRefs` for scalable state management across components.

Can I use Pinia for state management in a Nuxt SSR application?▼

Yes, Pinia supports Nuxt SSR applications by providing SSR-friendly store definitions and clear guidance for SSR hydration. This ensures stores initialize correctly during server-side rendering and client-side mounting.

What is the best way to extract reactive state from a Vue store without losing reactivity?▼

Use the `storeToRefs` function to extract reactive state and getters from a Pinia store without losing reactivity. This enables proper store composition by maintaining reactive properties during destructuring.

Does Pinia support devtools integration and HMR for Vue stores?▼

Pinia offers devtools integration and Hot Module Replacement (HMR) support for Vue stores. These features allow developers to inspect state changes during development and update store definitions without full page reloads.

How do I add custom logic to Pinia state management using plugins?▼

Pinia provides plugin support to extend Vue store capabilities with custom logic during definition. This enables injecting additional functionality like synchronization or logging into your state management process.

Why use defineStore for Vue state management instead of component-level state?▼

Using `defineStore` provides a centralized, type-safe approach to Vue state management, addressing the complexity of managing shared state across components. It enforces scalable store definitions and enables state composition.