pinia

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Pinia

Pinia is the official state management library for Vue, designed to be intuitive and type-safe. It supports both Options API and Composition API styles, with first-class TypeScript support and devtools integration.

The skill is based on Pinia v3.0.4, generated at 2026-01-28.

Pinia是Vue官方的状态管理库，设计直观且类型安全。它同时支持Options API和Composition API风格，提供一流的TypeScript支持以及开发者工具集成。

本技能基于Pinia v3.0.4，生成于2026年1月28日。

Core References

核心参考

Topic	Description	Reference
Stores	Defining stores, state, getters, actions, storeToRefs, subscriptions	core-stores

主题	描述	参考链接
Stores	定义store、state、getters、actions，storeToRefs，订阅	core-stores

Features

功能特性

Extensibility

可扩展性

Topic	Description	Reference
Plugins	Extend stores with custom properties, state, and behavior	features-plugins

主题	描述	参考链接
Plugins	使用自定义属性、状态和行为扩展store	features-plugins

Composability

组合性

Topic	Description	Reference
Composables	Using Vue composables within stores (VueUse, etc.)	features-composables
Composing Stores	Store-to-store communication, avoiding circular dependencies	features-composing-stores

主题	描述	参考链接
Composables	在store中使用Vue组合式函数（如VueUse等）	features-composables
Composing Stores	Store间通信，避免循环依赖	features-composing-stores

Best Practices

最佳实践

Topic	Description	Reference
Testing	Unit testing with @pinia/testing, mocking, stubbing	best-practices-testing
Outside Components	Using stores in navigation guards, plugins, middlewares	best-practices-outside-component

主题	描述	参考链接
Testing	使用@pinia/testing进行单元测试、模拟、存根	best-practices-testing
Outside Components	在导航守卫、插件、中间件中使用store	best-practices-outside-component

Advanced

进阶内容

Topic	Description	Reference
SSR	Server-side rendering, state hydration	advanced-ssr
Nuxt	Nuxt integration, auto-imports, SSR best practices	advanced-nuxt
HMR	Hot module replacement for development	advanced-hmr

主题	描述	参考链接
SSR	服务端渲染、状态水合	advanced-ssr
Nuxt	Nuxt集成、自动导入、SSR最佳实践	advanced-nuxt
HMR	开发环境下的热模块替换	advanced-hmr

Key Recommendations

关键建议

Prefer Setup Stores for complex logic, composables, and watchers
Use
storeToRefs()
when destructuring state/getters to preserve reactivity
Actions can be destructured directly - they're bound to the store
Call stores inside functions not at module scope, especially for SSR
Add HMR support to each store for better development experience
Use
@pinia/testing
for component tests with mocked stores

优先使用Setup Stores处理复杂逻辑、组合式函数和监听器
**使用
```
storeToRefs()
```
**解构state/getters时保留响应式
Actions可直接解构 - 它们已绑定到store
在函数内部调用store而非模块作用域，尤其是在SSR场景下
为每个store添加HMR支持以提升开发体验
**使用
```
@pinia/testing
```
**在组件测试中模拟store