从 Vue3 回望 Vue2：状态管理现代化：从 Vuex 到 Pinia

03｜状态管理现代化：从 Vuex 到 Pinia

框架不是重做，而是进化

Vue3 的状态管理不仅是更换工具，更是设计理念的一次革新。从 Vuex 到 Pinia，我们不只是优化代码量，而是追求更贴合现代开发范式的思路。

一、状态管理是啥？为啥我们需要它？

在 Vue 项目中，组件之间经常需要共享数据：

• 用户信息（登录状态、权限）
• 商品列表、购物车数据
• 页面主题设置（浅色/深色）

在小型项目中，props 和 emit 足以传递数据。但当组件层级变深、组件数量变多时，数据管理就会变得混乱，难以追踪。

这就是状态管理登场的时机：它提供一个集中式的数据存储机制，让所有组件都能方便地读取和修改共享数据。

二、Vuex 与 Pinia 是什么？它们解决了什么问题？

Vuex 和 Pinia 都是 Vue 的状态管理库：

• Vuex 是 Vue2 官方推荐的状态管理工具，拥有完善的模块化机制和 DevTools 支持；
• Pinia 是 Vue3 官方推荐的新一代状态管理库，结合 Composition API，更轻量、类型安全。

它们都解决了组件间状态共享、集中式管理、可预测的数据流问题。

三、Vuex vs Pinia 对比详解

3.1 核心理念对比

3.2 状态定义、模块化与组件调用整合对比

当项目规模较小时，只定义一个 store 就够了，但随着复杂度增加，我们需要模块化管理多个 store，并在组件中调用。

Vuex 实现方式

// store/index.js
export default new Vuex.Store({
  modules: {
    counter: {
      namespaced: true,
      state: { count: 0 },
      mutations: {
        increment(state) { state.count++ }
      },
      actions: {
        asyncIncrement({ commit }) {
          setTimeout(() => commit('increment'), 1000)
        }
      }
    },
    user: {
      namespaced: true,
      state: { name: '' },
      mutations: {
        setName(state, name) { state.name = name }
      }
    }
  }
})

// 组件中调用
computed: {
  count() {
    return this.$store.state.counter.count
  },
  userName() {
    return this.$store.state.user.name
  }
},
methods: {
  increment() {
    this.$store.commit('counter/increment')
  },
  updateName(name) {
    this.$store.commit('user/setName', name)
  }
}

Pinia 实现方式

// stores/counter.ts
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    async asyncIncrement() {
      setTimeout(() => this.count++, 1000)
    }
  }
})

// stores/user.ts
export const useUserStore = defineStore('user', {
  state: () => ({ name: '' }),
  actions: {
    setName(name: string) { this.name = name }
  }
})

// 组件中调用
setup() {
  const counter = useCounterStore()
  const user = useUserStore()

  return {
    count: computed(() => counter.count),
    increment: counter.asyncIncrement,
    userName: computed(() => user.name),
    updateName: user.setName
  }
}

整合对比总结：

四、调试与开发体验对比

在介绍对比前，我们先快速了解两个关键调试概念：

• 时间旅行调试（Time Travel Debugging）：可以回溯每一次状态变化，就像“撤销操作”一样调试应用。
• 热更新（Hot Module Replacement, HMR）：修改 store 代码后，应用无需刷新即可自动更新状态逻辑，极大提升开发效率。