pinia

# Pinia Skill Expert assistance for implementing Pinia state management in Vue 3 applications. ## Capabilities - Create type-safe Pinia stores - Implement actions for async operations - Define getters for computed state - Configure Pinia plugins (persistence, etc.) - Set up store composition patterns - Integrate with Vue DevTools ## Usage Invoke this skill when you need to: - Set up global state management in Vue - Create feature-specific stores - Implement persistent state - Compose multiple stores - Handle async state operations ## Inputs | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | storeName | string | Yes | Store name (use prefix) | | stateShape | object | Yes | Initial state structure | | actions | array | Yes | Store actions | | getters | array | No | Computed getters | | persist | boolean | No | Enable persistence | ### Configuration Example ```json { "storeName": "useUserStore", "stateShape": { "user": null, "isAuthenticated": false }, "actions": ["login", "logout", "fetchUser"], "getters": ["fullName", "isAdmin"], "persist": true } ``` ## Store Patterns ### Setup Store (Recommended) ```typescript // stores/user.ts import { ref, computed } from 'vue'; import { defineStore } from 'pinia'; interface User { id: string; name: string; email: string; role: 'user' | 'admin'; } export const useUserStore = defineStore('user', () => { // State const user = ref<User | null>(null); co...