pinia

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

当用户有以下需求时，可使用此技能：

在Vue 3应用中搭建Pinia状态管理
使用defineStore()创建store
操作state、getter和action
在组合式API（Composition API）中使用Pinia
在选项式API（Options API）中使用Pinia
结合Pinia实现服务端渲染（SSR）
创建并使用Pinia插件
在组件中访问store
在组件之间共享状态
通过插件实现状态持久化
测试Pinia store
从Vuex迁移到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/

```
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
```

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

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/

本技能的结构与Pinia官方文档结构一致（https://pinia.vuejs.org/introduction.html, https://pinia.vuejs.org/core-concepts/, https://pinia.vuejs.org/api/）。使用Pinia时：

从用户的请求中确定主题：
- 介绍 →
```
examples/introduction/
```
- 核心概念 →
```
examples/core-concepts/
```
- 食谱 →
```
examples/cookbook/
```
- 服务端渲染（SSR） →
```
examples/ssr/
```
- API参考 →
```
api/
```

从
examples/
目录中加载对应的示例文件：

介绍 -

examples/introduction/

```
examples/introduction/introduction.md
```

核心概念 -

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
```

食谱 -

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
```

必要时参考
api/
目录中的API文档：

Pinia核心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

遵循示例文件中的具体说明，包括语法、结构和最佳实践

重要提示:
- 所有示例均遵循Pinia最佳实践
- 适用的示例包含JavaScript和TypeScript两种版本
- 每个示例文件都包含参数、返回值、常见错误、最佳实践和使用场景
- 请务必查看示例文件中的最佳实践和通用模式
必要时参考官方文档:
- 介绍: https://pinia.vuejs.org/introduction.html
- 核心概念: https://pinia.vuejs.org/core-concepts/
- API参考: 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

使用defineStore(): 始终使用defineStore()来创建store
Store命名: 使用具有描述性的store ID
State结构: 尽可能保持state扁平化和规范化
Getter: 使用getter处理从state派生的计算值
Action: 使用action处理异步操作和状态变更
TypeScript: 使用TypeScript以获得类型安全性
Store组合: 将大型store拆分为更小、职责单一的store
SSR: 为服务端渲染配置正确的SSR环境
插件: 使用插件处理横切关注点
测试: 为store和action编写测试用例

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

官方文档: https://pinia.vuejs.org/
介绍: https://pinia.vuejs.org/introduction.html
核心概念: https://pinia.vuejs.org/core-concepts/
API参考: https://pinia.vuejs.org/api/
GitHub仓库: 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, 插件, 服务端渲染, 类型支持

Pinia, 状态管理, store, 存储, Vue 3, Composition API, 组合式API, Options API, 选项式API, defineStore, state, getter, action, 插件, SSR, 服务端渲染, TypeScript, Vuex迁移, 类型支持