Vuex 和 Pinia 都是 Vue 生态中的状态管理库但它们的定位和设计理念有本质区别。Pinia 是 Vue 官方目前推荐的状态管理方案Vuex 已进入维护模式不再适用于新项目。 Vuex传统的集中式状态管理Vuex 是 Vue 2 时代官方推荐的状态管理库遵循 Flux 架构采用严格的单向数据流专为大型复杂应用设计以确保状态变化的可预测性。核心概念· State单一状态树存放所有共享数据。· Getters从 State 派生数据类似计算属性。· Mutations唯一可以同步修改 State 的地方。· Actions处理异步逻辑通过 commit 触发 Mutation 间接更新状态。· Modules将 Store 分割成模块通过命名空间管理。Vuex 的严格规范在大型团队中有利于代码规范但也带来了大量样板代码和复杂的 TypeScript 类型声明等问题。 PiniaVue 3 的现代化状态管理Pinia 由 Vue 核心团队成员开发最初被称为 “Vuex 5”但并非 Vuex 的升级版而是从设计理念上就不同的替代方案。它深度整合 Vue 3 的 Composition API 和响应式系统API 极其简洁。核心概念· State使用函数返回初始状态更符合 Vue 3 风格。· Getters类似 Vue 的计算属性写法更直观。· Actions取消了 Mutations可以直接修改 State同时支持同步和异步操作。 核心差异对比对比维度 Vuex PiniaAPI 设计 复杂需区分 Mutations/Actions 极简无 MutationsActions 直接改 StateTypeScript 支持 需大量手写类型声明体验较差 开箱即用的完整类型推导IDE 自动补全精准模块化 单一 Store 树嵌套 Modules访问路径冗长 多 Store 设计独立定义可互相 import 引用体积 稍大 约 1.5kb极其轻量代码量 样板代码多 通常减少 30%–50%Vue 版本 支持 Vue 2 和 Vue 3 专为 Vue 3 设计也支持 Vue 2官方定位 维护模式不推荐用于新代码 官方默认推荐的状态管理方案 如何选择新项目直接选择 Pinia。它是 Vue 官方推荐API 简洁、TS 体验优秀、体积小巧是当前 Vue 3 生态的绝对主流。存量 Vuex 项目不必急于全量迁移可采用渐进式迁移——新功能用 Pinia 开发旧模块在维护中逐步迁移也可通过“桥接 Store”让两者共存优先迁移用户信息、权限等核心状态。仅需简单状态共享如果应用只有两三个页面使用 Vue 3 自身的 ref/reactive 配合 provide/inject 即可无需引入任何状态管理库。 总结Pinia 并非 Vuex 的简单升级而是一次设计理念的革新——用更少的 API、更好的类型支持、更自然的模块化解决了 Vuex 长期存在的样板代码多、TS 体验差、模块嵌套复杂等痛点。对于 2026 年的 Vue 开发者而言Pinia 已是默认选择Vuex 则属于需要维护的历史项目。下面分别对 Vuex 和 Pinia 做详细拆解包括设计思想、核心概念、代码示例、优缺点和适用场景。一、Vuex 详解是什么Vuex 是 Vue 2 时代官方推荐的状态管理库受 Flux、Redux 启发采用集中式存储管理组件间共享状态并通过一套规则保证状态变化可预测、可追踪。Vuex 4 适配 Vue 3Vuex 3 适配 Vue 2。目前 Vuex 已进入维护模式官方不再推荐用于新项目。核心思想· 单一状态树整个应用只有一个 Store所有共享状态集中存放。· 单向数据流组件不能直接修改 State必须通过 Mutation。· 严格同步Mutation 必须同步异步逻辑放在 Action 中。核心概念概念 作用 特点State 存储共享数据 单一状态树唯一数据源Getters 从 State 派生数据 类似计算属性可缓存Mutations 修改 State 的唯一方式 必须同步通过 commit 触发Actions 处理异步逻辑 通过 dispatch 触发内部 commit MutationModules 拆分 Store 可命名空间隔离避免冲突工作流程组件 dispatch Action ↓ Action 执行异步操作 ↓ Action commit Mutation ↓ Mutation 同步修改 State ↓ State 更新组件重新渲染代码示例创建 Store// store/index.jsimport{createStore}fromvuexexportdefaultcreateStore({state:{count:0},getters:{doubleCount:(state)state.count*2},mutations:{INCREMENT(state,payload){state.countpayload}},actions:{incrementAsync({commit},payload){setTimeout((){commit(INCREMENT,payload)},1000)}},modules:{// 模块化}})组件中使用script setup import { computed } from vue import { useStore } from vuex const store useStore() const count computed(() store.state.count) const doubleCount computed(() store.getters.doubleCount) const increment () store.commit(INCREMENT, 1) const incrementAsync () store.dispatch(incrementAsync, 1) /scriptTypeScript 支持Vuex 的 TS 支持较弱需要手动声明类型// 需要定义 InjectionKey、State 类型、模块类型等conststoreuseStoreState()模块嵌套后类型推导复杂通常需要大量手写类型声明。优缺点优点· 规范严格状态变更可追踪· DevTools 支持时间旅行· 生态成熟适合大型团队协作· 模块化支持命名空间缺点· 样板代码多概念多· 必须区分 Mutation 和 Action· TypeScript 体验差· 模块嵌套复杂访问路径冗长· 体积较大适用场景· Vue 2 老项目· 已使用 Vuex 的存量项目维护· 需要严格状态追踪的大型应用· 团队已熟悉 Vuex 规范二、Pinia 详解是什么Pinia 是 Vue 官方目前推荐的状态管理库由 Vue 核心团队成员开发最初被称为 “Vuex 5”但设计理念完全不同。它深度整合 Vue 3 的 Composition APIAPI 极简TypeScript 支持极佳。Pinia 支持 Vue 2 和 Vue 3但主要面向 Vue 3。核心特点· 无 Mutations只有 State、Getters、Actions· Actions 可直接修改 State同步异步都支持· 多 Store 设计每个 Store 独立可互相引用· 完整 TypeScript 类型推导开箱即用· 极轻量约 1.5kb· DevTools 支持时间旅行、热更新· 插件系统持久化、日志等核心概念概念 作用 特点Store 独立的状态容器 通过 defineStore 定义State 存储数据 可直接修改Getters 派生数据 类似计算属性Actions 业务逻辑 同步/异步均可直接改 State两种定义方式选项式 Store// stores/counter.jsimport{defineStore}frompiniaexportconstuseCounterStoredefineStore(counter,{state:()({count:0}),getters:{doubleCount:(state)state.count*2},actions:{increment(payload){this.countpayload},asyncincrementAsync(payload){awaitnewPromise((r)setTimeout(r,1000))this.increment(payload)}}})组合式 Store推荐// stores/counter.jsimport{defineStore}frompiniaimport{ref,computed}fromvueexportconstuseCounterStoredefineStore(counter,(){constcountref(0)constdoubleCountcomputed(()count.value*2)functionincrement(payload){count.valuepayload}asyncfunctionincrementAsync(payload){awaitnewPromise((r)setTimeout(r,1000))increment(payload)}return{count,doubleCount,increment,incrementAsync}})组件中使用script setup import { storeToRefs } from pinia import { useCounterStore } from /stores/counter const counter useCounterStore() // 解构 state 和 getters 并保持响应性 const { count, doubleCount } storeToRefs(counter) // actions 可以直接解构 const { increment, incrementAsync } counter /script template pcount: {{ count }}/p pdouble: {{ doubleCount }}/p button clickincrement(1)1/button button clickincrementAsync(1)异步 1/button /template常用 API· $patch批量修改 Statecounter.$patch({count:10})counter.$patch((state){state.count10})· $reset重置 State· 选项式 Store 自带· 组合式 Store 需手动实现· $subscribe监听 State 变化counter.$subscribe((mutation,state){console.log(state.count)})· $onAction监听 Action 调用counter.$onAction(({name,args,after,onError}){console.log(Action${name}被调用)})模块化与互相引用每个 Store 独立文件直接 import 即可// stores/user.jsimport{defineStore}frompiniaimport{useCartStore}from./cartexportconstuseUserStoredefineStore(user,(){constcartuseCartStore()functioncheckout(){cart.clear()}return{checkout}})TypeScript 支持Pinia 自动推导类型无需额外声明constcounteruseCounterStore()counter.count// numbercounter.increment(1)// 参数类型自动推导优缺点优点· API 极简学习成本低· TypeScript 体验极佳· 模块化自然多 Store 独立· 轻量体积小· 官方推荐生态活跃· DevTools 支持完善缺点· 从 Vuex 迁移需要一定成本· 部分旧插件只支持 Vuex· 组合式 Store 的 $reset 需手动实现适用场景· Vue 3 新项目· TypeScript 项目· 中小型到大型应用· 希望代码简洁、类型安全的团队三、总结对比维度 Vuex Pinia官方定位 维护模式 官方推荐API 风格 复杂Mutations Actions 极简只有 Actions修改 State 必须通过 Mutation 可直接修改TypeScript 需手动声明 自动推导模块化 嵌套 Modules 多 Store 独立体积 较大 约 1.5kb学习成本 较高 较低适用项目 Vue 2 老项目 Vue 3 新项目选择建议· 新项目直接用 Pinia· 老项目渐进式迁移新功能用 Pinia旧模块逐步替换· 简单共享状态ref/reactive provide/inject 即可无需状态管理库Pinia 已成为 Vue 3 生态的事实标准Vuex 则属于需要维护的历史方案。
