pinia

## When to use this skill Use this skill whenever the user wants to: - Set up Pinia state management in Vue 3 applications - Create stores with defineStore() - Work with state, getters, and actions - Use Pinia with Composition API - Use Pinia with Options API - Implement SSR (Server-Side Rendering) with Pinia - Create and use Pinia plugins - Access stores in components - Share state between components - Persist state with plugins - Test Pinia stores - Migrate from Vuex to Pinia ## How to use this skill This skill is organized to match the Pinia official documentation structure (https://pinia.vuejs.org/introduction.html, https://pinia.vuejs.org/core-concepts/, https://pinia.vuejs.org/api/). When working with Pinia: 1. **Identify the topic** from the user's request: - Introduction/介绍 → `examples/introduction/` - Core Concepts/核心概念 → `examples/core-concepts/` - Cookbook/食谱 → `examples/cookbook/` - SSR/服务端渲染 → `examples/ssr/` - API Reference/API 参考 → `api/` 2. **Load the appropriate example file** from the `examples/` directory: **Introduction (介绍)** - `examples/introduction/`: - `examples/introduction/introduction.md` **Core Concepts (核心概念)** - `examples/core-concepts/`: - `examples/core-concepts/actions.md` - `examples/core-concepts/defining-a-store.md` - `examples/core-concepts/getters.md` - `examples/core-concepts/index.md` - `examples/core-concepts/outside-component-usage.md` - `examples/core-concepts/plugins.md` - `examples/core-concepts/state.md` **Cookbook (食谱)** - `examples/cookbook/`: - `examples/cookbook/composables.md` - `examples/cookbook/composing-stores.md` - `examples/cookbook/hot-module-replacement.md` - `examples/cookbook/index.md` - `examples/cookbook/migration-v1-v2.md` - `examples/cookbook/migration-v2-v3.md` - `examples/cookbook/migration-vuex.md` - `examples/cookbook/options-api.md` - `examples/cookbook/testing.md` - `examples/cookbook/vscode-snippets.md` **SSR (服务端渲染)** - `examples/ssr/`: - `examples/ssr/index.md` - `examples/ssr/nuxt.md` 3. **Reference API documentation** in the `api/` directory when needed: **Pinia Core API** - `api/pinia/`: - `api/pinia/enumerations/MutationType.md` - `api/pinia/functions/acceptHMRUpdate.md` - `api/pinia/functions/createPinia.md` - `api/pinia/functions/defineStore.md` - `api/pinia/functions/disposePinia.md` - `api/pinia/functions/getActivePinia.md` - `api/pinia/functions/mapActions.md` - `api/pinia/functions/mapState.md` - `api/pinia/functions/mapStores.md` - `api/pinia/functions/mapWritableState.md` - `api/pinia/functions/setMapStoreSuffix.md` - `api/pinia/index.md` - `api/pinia/interfaces/Store.md` - `api/pinia/interfaces/StoreActions.md` - `api/pinia/interfaces/StoreDefinition.md` - `api/pinia/interfaces/StoreGetters.md` - `api/pinia/interfaces/StoreProperties.md` - `api/pinia/interfaces/StoreState.md` **@pinia/nuxt** - `api/@pinia/nuxt/`: - `api/@pinia/nuxt/index.md` - `api/@pinia/nuxt/interfaces/ModuleOptions.md` - `api/@pinia/nuxt/variables/default.md` **@pinia/testing** - `api/@pinia/testing/`: - `api/@pinia/testing/functions/createTestingPinia.md` - `api/@pinia/testing/index.md` - `api/@pinia/testing/interfaces/TestingOptions.md` - `api/@pinia/testing/interfaces/TestingPinia.md` 4. **Follow the specific instructions** in that example file for syntax, structure, and best practices **Important Notes**: - All examples follow Pinia best practices - Examples include both JavaScript and TypeScript versions where applicable - Each example file includes parameters, returns, common errors, best practices, and scenarios - Always check the example file for best practices and common patterns 5. **Reference the official documentation** when needed: - Introduction: https://pinia.vuejs.org/introduction.html - Core Concepts: https://pinia.vuejs.org/core-concepts/ - API Reference: https://pinia.vuejs.org/api/ ## Best Practices 1. **Use defineStore()**: Always use defineStore() to create stores 2. **Store naming**: Use descriptive store IDs 3. **State structure**: Keep state flat and normalized when possible 4. **Getters**: Use getters for computed values derived from state 5. **Actions**: Use actions for async operations and mutations 6. **TypeScript**: Use TypeScript for type safety 7. **Store composition**: Split large stores into smaller, focused stores 8. **SSR**: Use proper SSR setup for server-side rendering 9. **Plugins**: Use plugins for cross-cutting concerns 10. **Testing**: Write tests for stores and actions ## Resources - **Official Documentation**: https://pinia.vuejs.org/ - **Introduction**: https://pinia.vuejs.org/introduction.html - **Core Concepts**: https://pinia.vuejs.org/core-concepts/ - **API Reference**: https://pinia.vuejs.org/api/ - **GitHub Repository**: https://github.com/vuejs/pinia ## Keywords Pinia, state management, store, Vue 3, Composition API, Options API, defineStore, state, getters, actions, plugins, SSR, server-side rendering, TypeScript, Vuex migration, 状态管理, 存储, 组合式 API, 选项式 API, 插件, 服务端渲染, 类型支持