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:
- 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/
- Load the appropriate example file from the
examples/directory: Introduction (介绍) -examples/introduction/: Core Concepts (核心概念) -examples/core-concepts/: Cookbook (食谱) -examples/cookbook/: SSR (服务端渲染) -examples/ssr/:
- examples/introduction/introduction.md - 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 - 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 - examples/ssr/index.md - examples/ssr/nuxt.md
- Reference API documentation in the
api/directory when needed: Pinia Core API -api/pinia/: @pinia/nuxt -api/@pinia/nuxt/: @pinia/testing -api/@pinia/testing/:
- 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 - api/@pinia/nuxt/index.md - api/@pinia/nuxt/interfaces/ModuleOptions.md - api/@pinia/nuxt/variables/default.md - api/@pinia/testing/functions/createTestingPinia.md - api/@pinia/testing/index.md - api/@pinia/testing/interfaces/TestingOptions.md - api/@pinia/testing/interfaces/TestingPinia.md
- 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
- 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
- Use defineStore(): Always use defineStore() to create stores
- Store naming: Use descriptive store IDs
- State structure: Keep state flat and normalized when possible
- Getters: Use getters for computed values derived from state
- Actions: Use actions for async operations and mutations
- TypeScript: Use TypeScript for type safety
- Store composition: Split large stores into smaller, focused stores
- SSR: Use proper SSR setup for server-side rendering
- Plugins: Use plugins for cross-cutting concerns
- 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, 插件, 服务端渲染, 类型支持