Vue Pinia Best Practices

What it does

This skill provides best practices for using Pinia, a state management library, within Vue.js applications built with Vite. It focuses on structuring actions, getters, and mutations to improve code maintainability and scalability. The template offers a solid foundation for building complex UIs with predictable state updates.

When to use it

• When starting a new Vue 3 project using Pinia for state management.
• To refactor an existing Vue 2 or Vue 3 project that uses a less structured approach to Pinia.
• As a learning resource for developers wanting to improve their understanding of best practices in Vue and Pinia development.
• When needing a pre-configured Vite project with recommended Pinia setup.

Key capabilities

• Pre-defined store structure (actions, getters, mutations)
• Vite configuration optimized for Vue 3 development
• Pinia integration for state management
• Uniapp compatibility

Example prompts

• "Generate a new Pinia store with actions for fetching user data."
• "Show me an example of how to use getters in this Pinia setup."
• "How do I structure my mutations for asynchronous operations?"

Tips & gotchas

This skill assumes basic familiarity with Vue.js and Pinia concepts. While it provides a solid foundation, you may need to adapt the template to your specific project requirements.