Pinia 与 Vuex：现代 Vue 状态管理方案全面对比

原创于 2025-04-09 02:45:00 发布 · 3.5k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

vue 专栏收录该内容

103 篇文章

订阅专栏

前言

在 Vue 生态系统中，状态管理是构建复杂应用的关键环节。Vuex 长期作为 Vue 的官方状态管理库，而 Pinia 则是近年来崛起的新秀，甚至被 Vue 核心团队推荐为"下一代的 Vuex"。本文将深入比较这两者的区别，从设计理念到实际应用，帮助开发者做出合理的技术选型。

一、核心概念对比

1.1 设计哲学

Vuex：

基于 Flux 架构的集中式状态管理
强调严格的单向数据流
通过 mutations/actions/getters 等概念强制分离关注点

Pinia：

基于 Composition API 的轻量级状态管理
提供更灵活的组织方式
减少模板代码，更贴近 Vue 3 的响应式理念

1.2 基本结构差异

Vuex 的 Store 结构：

import { createStore } from 'vuex'

export default createStore({
  state: () => ({}),
  getters: {},
  mutations: {},
  actions: {},
  modules: {}
})

Pinia 的 Store 结构：

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => ({}),
  getters: {},
  actions: {}
})

关键区别：

Pinia 没有 mutations 概念，actions 可同步可异步
Pinia 使用 defineStore 工厂函数而非单一 store 实例
Pinia 的 store 本质是一个组合式函数

二、API 与用法对比

2.1 状态定义与访问

Vuex：

// 定义
state: () => ({
  count: 0
})

// 组件中使用
computed: {
  count() {
    return this.$store.state.count
  }
}

Pinia：

// 定义
state: () => ({
  count: 0
})

// 组件中使用
const store = useStore()
const count = computed(() => store.count)

优势对比：

Pinia 直接通过 store 实例访问状态，无需 $store.state 前缀
Pinia 的状态天然是响应式的，无需额外包装

2.2 状态变更方式

Vuex 的严格流程：

// 定义 mutation
mutations: {
  increment(state) {
    state.count++
  }
}

// 组件中提交
this.$store.commit('increment')

Pinia 的灵活方式：

// 直接修改
store.count++

// 或通过 action
actions: {
  increment() {
    this.count++
  }
}

// 组件中调用
store.increment()

关键区别：

Pinia 允许直接修改状态（仍可通过配置强制使用 actions）
消除了 mutation 的概念，简化了状态变更流程

2.3 Getter 实现对比

Vuex getter：

getters: {
  doubleCount(state) {
    return state.count * 2
  }
}

// 使用
this.$store.getters.doubleCount

Pinia getter：

getters: {
  doubleCount() {
    return this.count * 2
  }
}

// 使用
store.doubleCount

区别：

Pinia 的 getter 通过 this 访问整个 store 实例
语法更接近 Vue 组件的计算属性

三、模块化方案对比

3.1 Vuex 的模块系统

const moduleA = {
  namespaced: true,
  state: () => ({}),
  mutations: {},
  actions: {}
}

const store = createStore({
  modules: {
    a: moduleA
  }
})

// 使用
this.$store.commit('a/someMutation')

特点：

需要显式声明 namespaced
访问需要通过模块前缀
嵌套模块可能变得复杂

3.2 Pinia 的模块化方案

// userStore.js
export const useUserStore = defineStore('user', {
  state: () => ({}),
  actions: {}
})

// productStore.js
export const useProductStore = defineStore('product', {
  state: () => ({}),
  actions: {}
})

// 组件中使用
const userStore = useUserStore()
const productStore = useProductStore()

优势：

每个 store 天然独立，无需命名空间配置
可以交叉组合使用多个 store
更符合现代前端工程的模块化思想

四、TypeScript 支持对比

4.1 Vuex 的 TS 支持

Vuex 4 对 TypeScript 的支持有所改进，但仍存在挑战：

interface State {
  count: number
}

export default createStore<State>({
  state: (): State => ({
    count: 0
  }),
  // 需要额外类型声明来保证类型安全
})

痛点：

mutations/actions 参数需要手动声明类型
模块类型系统复杂
使用 this.$store 时类型推断有限

4.2 Pinia 的 TS 优势

Pinia 天生为 TypeScript 设计：

interface State {
  count: number
}

export const useStore = defineStore('store', {
  state: (): State => ({
    count: 0
  }),
  getters: {
    doubleCount(): number {
      return this.count * 2 // 完全类型推断
    }
  },
  actions: {
    increment() {
      this.count++ // 自动类型推断
    }
  }
})

特点：

完整的类型推断
无需额外类型声明
组合 store 时类型安全

五、性能与体积比较

5.1 包体积

Vuex 4:
- 生产版本: ~9.3KB (gzipped)
Pinia:
- 生产版本: ~5.8KB (gzipped)

Pinia 体积减少约 40%，对 bundle 大小更友好。

5.2 运行时性能

两者在大多数场景下性能相当，但 Pinia 有轻微优势：

响应式系统：
- Pinia 直接基于 Vue 3 的 reactive()
- Vuex 需要维护自己的响应式系统
更新效率：
- Pinia 的细粒度更新更高效
- Vuex 的全局单一 store 在大型应用中可能触发不必要的更新
内存占用：
- Pinia 的模块化设计内存占用更低
- Vuex 需要维护完整的模块树

六、开发体验对比

6.1 学习曲线

Vuex：

概念较多（state, getters, mutations, actions, modules）
需要理解 Flux 架构思想
严格的规则增加了新手入门难度

Pinia：

API 更简洁直观
与 Composition API 思维一致
减少概念数量，降低学习成本

6.2 调试支持

两者都支持 Vue DevTools：

Vuex：
- 完整的时间旅行调试
- Mutation 日志记录
- 状态快照
Pinia：
- 类似的时间旅行能力
- 更清晰的 store 结构展示
- Actions 的独立跟踪

6.3 测试友好性

Pinia 在测试方面有明显优势：

// Pinia 测试示例
const store = useStore()
store.count = 10
expect(store.doubleCount).toBe(20)

// 对比 Vuex 测试
const store = createStore({ /* 配置 */ })
store.commit('increment')
expect(store.getters.doubleCount).toBe(2)

Pinia 的 store 是普通 JavaScript 对象，更容易模拟和测试。

七、迁移与兼容性

7.1 Vue 版本支持

Vuex：
- Vuex 3 用于 Vue 2
- Vuex 4 用于 Vue 3
Pinia：
- 仅支持 Vue 3
- 无法在 Vue 2 项目中使用

7.2 从 Vuex 迁移到 Pinia

迁移策略：

渐进式迁移：
- 可以同时使用 Vuex 和 Pinia
- 逐步将模块重写为 Pinia store
API 对应关系：

Vuex 概念 Pinia 等效
state state
getters getters
mutations actions (同步)
actions actions (异步)
modules 多个 store
辅助工具：
- Pinia 提供 createPinia() 替代 createStore()
- 有社区工具帮助自动转换部分代码

Vuex 概念	Pinia 等效
state	state
getters	getters
mutations	actions (同步)
actions	actions (异步)
modules	多个 store

八、生态系统与社区支持

8.1 插件生态

Vuex：

成熟的插件生态
如 vuex-persistedstate、vuex-router-sync
但新插件开发已放缓

Pinia：

官方插件如 @pinia/nuxt、pinia-plugin-persist
社区插件快速增长
更现代的插件 API

8.2 社区采用率

Vuex：
- 长期作为官方解决方案
- 大量现有项目使用
- 文档和资源丰富
Pinia：
- 被 Vue 核心团队推荐
- 新项目首选
- 社区支持快速增长

九、选型建议

9.1 选择 Vuex 的场景

维护现有 Vuex 项目
需要支持 Vue 2
项目已深度集成 Vuex 插件生态
团队已熟悉 Vuex 且无升级需求

9.2 选择 Pinia 的场景

新开始的 Vue 3 项目
重视 TypeScript 支持
希望更简单的状态管理
需要更好的模块化和组合能力
关注包体积和性能优化

9.3 未来趋势

Vue 核心团队成员 Eduardo San Martin Morote (posva) 表示：
“Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结果它已经实现了我们在 Vuex 5 中计划的大部分内容。现在 Pinia 已经成为 Vuex 5 的实质内容。”

这表明 Pinia 代表了 Vue 状态管理的未来方向。

十、总结对比表

特性	Vuex	Pinia
Vue 版本支持	Vue 2 & 3	仅 Vue 3
包大小	~9.3KB	~5.8KB
TypeScript 支持	一般	优秀
核心概念	State/Getters/Mutations/Actions/Modules	State/Getters/Actions
状态变更	必须通过 mutations	可直接修改或通过 actions
模块化	命名空间模块	多个独立 store
组合 API 支持	需要额外封装	原生支持
学习曲线	较陡峭	平缓
调试支持	优秀	优秀
测试友好性	一般	优秀
未来维护	维护模式	积极发展