Pinia

What it does

This skill enables AI agents to interact with and utilize Pinia, the official state management library for Vue.js. It provides a centralized store for managing application state in a type-safe manner, supporting both Options API and Composition API styles. The skill facilitates accessing reactive data and offers features like plugins and composables within stores to enhance development efficiency.

When to use it

• When building complex Vue.js applications requiring organized state management.
• For projects utilizing the Composition API or needing type-safe state handling.
• To simplify store creation, access, and modification in a Vue.js project.
• When integrating Pinia with frameworks like Nuxt for server-side rendering (SSR).

Key capabilities

• Store Definition: Defining stores including state, getters, and actions.
• Plugins: Extending stores with custom properties and behaviors.
• Composables: Utilizing Vue composables within stores (e.g., from VueUse).
• Composable Stores: Facilitating communication between stores while avoiding circular dependencies.
• Testing: Unit testing using @pinia/testing including mocking and stubbing.
• SSR Support: Enabling server-side rendering and state hydration.
• Nuxt Integration: Provides best practices for integrating Pinia with the Nuxt framework.

Example prompts

• "How do I create a Pinia store to manage user authentication?"
• "Show me an example of using storeToRefs() in a Vue component."
• "What's the recommended way to test a Pinia action?"

Tips & gotchas

• For complex logic, composables, and watchers, prefer using Setup Stores.
• Always use storeToRefs() when destructuring state or getters to maintain reactivity.
• Be mindful of calling stores inside functions rather than at the module scope, especially for SSR applications.