pinia
Crear stores de Pinia para aplicaciones Vue
Los equipos de Vue necesitan patrones de estado consistentes entre componentes, pruebas, SSR y aplicaciones Nuxt. Esta skill proporciona orientación enfocada sobre Pinia con ejemplos para stores, plugins, hidratación y pruebas.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Recursos legibles por agentes
Usa estos enlaces cuando un AI Agent, crawler o script necesite contexto limpio en lugar de leer toda la página.
Pruébalo
Usando "pinia". Una funcionalidad de carrito necesita estado compartido, totales derivados y una acción de checkout.
Resultado esperado:
La respuesta recomienda un Setup Store, separa los artículos del carrito de los totales calculados, mantiene checkout como una acción y señala dónde se pueden llamar otros stores de forma segura.
Usando "pinia". Una prueba de componente necesita un store de usuario con un estado conocido de sesión iniciada.
Resultado esperado:
La respuesta describe el uso de createTestingPinia con estado inicial, la elección de si las acciones se stubbean y la verificación del comportamiento del componente mediante la UI renderizada.
Usando "pinia". Un middleware de Nuxt lee un store de autenticación antes de redirigir usuarios.
Resultado esperado:
La respuesta explica cuándo pasar la instancia de Pinia, cómo las importaciones automáticas de Nuxt afectan el uso y cómo evitar errores de contexto SSR.
Auditoría de seguridad
Riesgo bajoStatic analysis reported many command execution, network, filesystem, credential, and heuristic combination findings, but review found markdown documentation examples rather than executable skill logic. No prompt injection, malicious exfiltration intent, or runtime automation was found; the residual risk is low because examples mention browser storage, environment checks, install commands, and source URLs.
Problemas de riesgo bajo (4)
Factores de riesgo
⚙️ Comandos externos (4)
🌐 Acceso a red (4)
📁 Acceso al sistema de archivos (3)
🔑 Variables de entorno (1)
Puntuación de calidad
Lo que puedes crear
Crear un patrón de store
Diseñar un store de Pinia usando sintaxis de Setup Store u Option Store con estado tipado, getters y acciones.
Preparar pruebas de stores
Configurar pruebas aisladas de Pinia con createPinia, createTestingPinia, stubs de acciones y stores simulados tipados.
Corregir el uso de SSR y Nuxt
Aplicar orientación de Pinia para importaciones automáticas, middleware de rutas, hidratación y evitar contaminación de estado entre solicitudes.
Prueba estos prompts
Crea un store de Pinia para esta funcionalidad de Vue. Incluye estado, getters, acciones y explica si Setup Store u Option Store encaja mejor.
Revisa este componente y el uso del store. Muestra dónde usar storeToRefs, dónde se pueden desestructurar las acciones y qué podría romper la reactividad.
Diseña pruebas para este store de Pinia y su componente consumidor. Incluye estado inicial, decisiones sobre stubbing de acciones y orientación para mocks tipados.
Revisa esta configuración de Nuxt Pinia para seguridad en SSR. Comprueba el uso de middleware, el orden de hidratación, el registro de plugins y los riesgos de estado entre solicitudes.
Mejores prácticas
- Preferir Setup Stores para lógica compleja, composables, watchers y comportamiento de estado reutilizable.
- Usar storeToRefs al desestructurar estado o getters, y desestructurar acciones directamente.
- Crear instancias nuevas de Pinia para pruebas y solicitudes SSR a fin de evitar fugas de estado compartido.
Evitar
- No llamar stores en el ámbito del módulo antes de que Pinia esté instalado.
- No leer estado circular de stores durante setup en dos stores.
- No devolver refs del DOM no serializables desde Setup Stores.