Vue-理解 vuex

一、前言

在开发中大型 Vue 应用时，我们常常会遇到多个组件之间共享数据、通信复杂的问题。例如：

• 多个组件需要访问同一个用户信息；
• 组件之间需要传递状态或事件；
• 数据变更需要同步更新多个组件；

这时，Vuex 就派上用场了。它是 Vue 官方推荐的状态管理模式，专为 Vue.js 应用程序开发提供集中式存储管理。

本文将带你深入了解：

• 什么是 Vuex？
• Vuex 的核心概念（State、Getter、Mutation、Action、Module）；
• 如何在 Vue 项目中安装和使用 Vuex；
• 实际开发中的典型使用场景；
• Vuex 在 Vue 2 和 Vue 3 中的差异；
• 推荐的最佳实践；

二、什么是 Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说，Vuex 就是一个全局的“仓库”，所有组件都可以从这个仓库中读取或修改数据，从而实现跨组件的状态共享。

三、为什么需要 Vuex？

✅ 没有 Vuex 的问题：

• 父子组件传值靠 props / $emit；
• 兄弟组件之间传值要通过共同父级；
• 深层嵌套组件传值困难；
• 多个组件依赖相同状态，难以维护；

✅ 使用 Vuex 的优势：

四、Vuex 的核心概念

Vuex 主要有五个核心模块：

1. State：状态（数据）

用于保存应用程序的状态，是驱动应用的数据源。

state: {
  count: 0,
  user: null
}

2. Getter：获取状态（计算属性）

类似于 Vue 的 computed 属性，用于对 state 做一些派生处理。

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

3. Mutation：更改状态的方法（同步操作）

唯一可以修改 state 的方式，必须是同步函数。

mutations: {
  increment(state) {
    state.count++
  },
  setUser(state, user) {
    state.user = user
  }
}

4. Action：异步操作状态

用于处理异步逻辑（如请求 API），提交 mutation 来改变状态。

actions: {
  async fetchUser({ commit }, userId) {
    const res = await getUserById(userId)
    commit('setUser', res.data)
  }
}

5. Module：模块化组织

当项目变得庞大时，可以将 store 分割成模块，每个模块拥有自己的 state、getter、mutation、action。

modules: {
  userModule,
  cartModule
}

五、如何在 Vue 项目中使用 Vuex

步骤 1：安装 Vuex

npm install vuex@next --save

注意：如果你使用的是 Vue 2，请使用 vuex@3 版本。

步骤 2：创建 Store 实例

// src/store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  modules: {}
})

步骤 3：挂载到 Vue 实例

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

步骤 4：在组件中使用 Vuex

<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <p>双倍计数：{{ doubleCount }}</p>
    <button @click="increment">+1</button>
    <button @click="incrementAsync">异步+1</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['incrementAsync'])
  }
}
</script>

📌 说明：

• 使用 mapState、mapGetters、mapMutations、mapActions 可简化写法；
• 也可以直接使用 $store.state.xxx 或 $store.dispatch() 直接调用。

六、Vuex 在 Vue 2 与 Vue 3 中的区别

七、Vuex 的实际应用场景

八、Vuex 最佳实践建议

九、总结对比表

十、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！