What is the difference between Options and Setup stores?

Options stores use a syntax similar to the Vue 2 Data/Methods/Computed style and include a built-in $reset() method. Setup stores use Composition API syntax, offering more flexibility and the ability to use composables within the store.

Is this skill compatible with Server-Side Rendering (SSR)?

Absolutely. It includes specific patterns for SSR-safe store initialization, ensuring that browser-only APIs like localStorage don't crash the server and that state hydrates correctly on the client.

Why shouldn't I store API responses in Pinia?

Pinia is best for shared client-side UI state. Server data should be handled by data-fetching libraries that provide built-in caching, revalidation, and loading states, which Pinia does not manage natively.

Does this skill help with reactivity issues?

Yes, it enforces the use of storeToRefs() when destructuring state. Direct destructuring of Pinia stores breaks Vue's reactivity system, which is a common cause of UI synchronization bugs.

Pinia State Management

Name: Pinia State Management
Author: agents-inc

byagents-inc

0•

Herramientas de Diseño

Implements professional Pinia state management patterns and best practices for reactive Vue 3 applications.

This skill provides specialized guidance for managing shared client state in Vue 3 applications using Pinia. It helps developers navigate the choice between Options and Setup stores, enforces critical reactivity patterns using storeToRefs, and provides structured templates for store composition, persistence, and SSR compatibility. By emphasizing the separation of server data from client state, it ensures applications remain performant, type-safe, and easy to debug via Vue DevTools.

Características Principales

010 GitHub stars

02State persistence configuration for local and session storage

03Reactivity-safe state destructuring using storeToRefs enforcement

04SSR-safe initialization and hydration strategies for universal apps

05Store composition patterns to manage complex inter-store dependencies

06Smart selection between Options Store and Setup Store architectures

Casos de Uso

01Architecting scalable shared state systems in enterprise Vue 3 projects

02Implementing persistent user preferences and UI state across sessions

03Refactoring legacy state logic into modern, type-safe Pinia stores

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-state-pinia

For use in Claude.ai and ChatGPT

Download Skill