---
name: "pinia-vue-state-management"
description: "Manage global reactive state in Vue 3 applications using official type-safe Pinia stores."
metadata:
  author: "Eduardo San Martin Morote"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create pinia store"
  - "setup store syntax pinia"
  - "persist pinia state"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Pinia Modular State Stores & Actions with TypeScript

Configures Pinia stores: Option Stores vs Setup Stores, defining getters with return typing, asynchronous actions with error handling, store subscriptions ($subscribe, $onAction), and persisting state with plugins.

## When to Invoke
Invoke this skill whenever you need to:
- create pinia store
- setup store syntax pinia
- persist pinia state

## Execution SOP & Rules
1. Define stores with defineStore('name', () => { ... }) setup store syntax for full composition flexibility.
2. Expose state via refs, getters via computed(), and actions via plain functions.
3. Use storeToRefs(store) when destructuring state and getters in components to preserve reactivity.
4. Avoid mutating state directly in components when complex multi-property validation is required.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.