pinia

GitHub

Vue 官方状态管理库 Pinia 的使用指南,涵盖 Store 定义、类型安全、插件扩展、组件通信及 SSR/Nuxt 集成等最佳实践。

skills/pinia/SKILL.md uni-helper/skills

Trigger Scenarios

Vue 项目中需要管理全局或局部状态 使用 Pinia 定义 Store、Getters 或 Actions 配置 Vue 应用的跨组件数据共享

Install

npx skills add uni-helper/skills --skill pinia -g -y
More Options

Use without installing

npx skills use uni-helper/skills@pinia

指定 Agent (Claude Code)

npx skills add uni-helper/skills --skill pinia -a claude-code -g -y

安装 repo 全部 skill

npx skills add uni-helper/skills --all -g -y

预览 repo 内 skill

npx skills add uni-helper/skills --list

SKILL.md

Frontmatter
{
    "name": "pinia",
    "metadata": {
        "author": "Anthony Fu",
        "source": "Generated from https:\/\/github.com\/vuejs\/pinia, scripts located at https:\/\/github.com\/antfu\/skills",
        "version": "2026.1.28"
    },
    "description": "Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state\/getters\/actions, or implementing store patterns in Vue apps."
}

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.

Core References

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

Features

Extensibility

Topic Description Reference
Plugins Extend stores with custom properties, state, and behavior 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

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

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

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

Version History

  • 15909ff Current 2026-07-24 12:22

Same Skill Collection

skills/uni-helper/SKILL.md
skills/uniapp/SKILL.md
skills/unocss/SKILL.md
skills/vite/SKILL.md
skills/vue-best-practices/SKILL.md
skills/vue/SKILL.md
skills/vueuse-functions/SKILL.md
skills/web-design-guidelines/SKILL.md

Metadata

Files
0
Version
15909ff
Hash
fba52570
Indexed
2026-07-24 12:22

inicio - Wiki
Copyright © 2011-2026 iteam. Current version is 2.155.2. UTC+08:00, 2026-08-17 03:51
浙ICP备14020137号-1 $mapa de visitantes$