介绍
Pinia（发音 /ˈpiːnjə/） 是 Vue 官方团队开发并维护的新一代状态管理库，旨在替代 Vuex，成为 Vue3 生态的首选方案。
- 核心定位：集中管理跨组件/页面共享的全局状态（如用户信息、购物车、主题设置）。
- 诞生背景：2019 年 11 月实验立项，2021 年正式发布，适配 Vue3 组合式 API，同时兼容 Vue2。
- 核心设计理念：简洁、高效、类型安全，解决 Vuex 模块化繁琐、TS 支持差、API 冗余等痛点。
一句话理解状态
状态：多个组件共享的响应式数据
优势（对比 Vuex）
1. 极简 API，移除冗余概念
- ❌ Vuex：必须按
state → mutations → actions流程，mutation 仅同步、action 仅异步，模板代码多。 - ✅ Pinia：废弃 mutations，状态修改统一在
actions中完成（支持同步+异步），可直接修改 state，代码更直观。
2. 完美 TypeScript 支持
- 原生适配 TS，无需额外配置即可获得完整类型推断与自动补全。
- 支持组合式函数（Composition API）写法，与 Vue3 响应式系统（ref/reactive）无缝融合。
3. 模块化设计，无嵌套复杂度
- ❌ Vuex：需手动嵌套
modules，命名空间繁琐，代码分割成本高。 - ✅ Pinia：每个
Store是独立扁平实体，通过唯一 ID 区分，天然支持代码分割与按需加载。
4. 轻量高效，体积小性能优
- 压缩后仅 1KB 左右，几乎无额外性能损耗。
- 状态更新精准触发关联组件重渲染，效率高于 Vuex。
5. 开发体验友好
- 深度集成 Vue DevTools，支持时间旅行调试、状态快照、修改记录追踪。
- 支持热更新，修改 Store 无需重载页面，开发时保留当前 state。
- 支持服务端渲染（SSR）与插件扩展（如持久化存储）。
概念
1. Store（仓库）
- 定义：用
defineStore(id, options)创建的独立状态单元，包含state、getters、actions。 - ID：每个 Store 的唯一标识（字符串），用于内部管理与调试。
- 两种写法：
- 选项式：类似 Vue 选项式 API，结构清晰易上手。
- 组合式：类似 Vue3 组合式 API，直接使用 ref/reactive，更灵活。
2. State（状态）
- 作用：存储初始数据，相当于组件的
data，必须是函数（避免多实例状态污染）。 - 特点：响应式，可直接访问或修改（推荐用
actions或$patch批量修改）。
3. Getters（计算属性）
- 作用：对 state 进行计算/过滤，相当于组件的
computed，可依赖其他 getters。 - 特点：缓存结果，依赖变化时自动更新，支持传参。
4. Actions（方法）
- 作用：修改状态的方法，相当于组件的
methods，支持同步+异步（如接口请求）。 - 特点：可访问
this（当前 Store 实例），支持跨 Store 调用，推荐用于封装业务逻辑。
总结
Pinia 作为 Vue 官方推荐的新一代状态管理库，以极简 API、完美 TS 支持、模块化设计、友好开发体验四大核心优势，彻底替代 Vuex，成为 Vue3 项目状态管理的首选方案。无论是小型项目还是大型应用，Pinia 都能提供简洁、高效、可维护的状态管理解决方案。