Vue-vuex 核心概念和 API

一、前言

Vuex 是 Vue 官方推荐的状态管理模式，适用于中大型 Vue 应用程序的全局状态管理。它通过集中式的 Store 管理组件之间的共享数据，使得状态变更更加可预测和易于维护。

本文将带你深入了解 Vuex 的五大核心概念（State、Getter、Mutation、Action、Module）以及常用的 API 方法，帮助你从基础到进阶掌握 Vuex 的使用方式。

二、Vuex 的五大核心概念

Vuex 主要由五个核心部分组成：

1. State：存储状态数据

state 是 Vuex 中最基础的数据仓库，用于保存应用程序中的共享状态。

state: {
  count: 0,
  user: null,
  todos: []
}

📌 使用方式：

• 组件中通过 this.$store.state.count 获取；
• 推荐结合 mapState 辅助函数简化写法。

import { mapState } from 'vuex'

computed: {
  ...mapState(['count'])
}

2. Getter：派生状态（类似 computed）

getter 用于对 state 进行加工处理，类似于 Vue 的 computed 属性。

getters: {
  doubleCount(state) {
    return state.count * 2
  },
  doneTodos(state) {
    return state.todos.filter(todo => todo.done)
  }
}

📌 使用方式：

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['doubleCount', 'doneTodos'])
}

3. Mutation：同步更改状态的方法

mutation 是唯一允许修改 state 的地方，必须是同步函数。

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

📌 使用方式：

this.$store.commit('increment')

或使用 mapMutations：

import { mapMutations } from 'vuex'

methods: {
  ...mapMutations(['increment', 'setUser'])
}

4. Action：异步操作状态的方法

action 用于处理异步逻辑，如请求接口、定时器等，最终通过提交 mutation 来改变状态。

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

📌 使用方式：

this.$store.dispatch('fetchUser', 1)

或使用 mapActions：

import { mapActions } from 'vuex'

methods: {
  ...mapActions(['fetchUser', 'incrementAsync'])
}

5. Module：模块化组织 Store

当项目变大时，我们可以将 store 拆分成多个模块（module），每个模块拥有自己的 state、getter、mutation 和 action。

modules: {
  userModule,
  cartModule
}

模块示例：

// modules/userModule.js
export default {
  namespaced: true,
  state: () => ({
    userInfo: null
  }),
  mutations: {
    setUserInfo(state, info) {
      state.userInfo = info
    }
  },
  actions: {
    fetchUserInfo({ commit }) {
      // ...
      commit('setUserInfo', data)
    }
  }
}

📌 使用带命名空间的模块：

dispatch('userModule/fetchUserInfo', null, { root: true })
commit('userModule/setUserInfo', info, { root: true })

三、Vuex 的常用 API 方法汇总

四、辅助函数（mapXXX）详解

为了减少重复代码，Vuex 提供了四个常用的辅助函数，它们都位于 vuex 包中。

1. mapState

将 store 的 state 映射为计算属性。

import { mapState } from 'vuex'

computed: {
  ...mapState(['count', 'user'])
}

等价于：

computed: {
  count() {
    return this.$store.state.count
  },
  user() {
    return this.$store.state.user
  }
}

2. mapGetters

将 store 的 getter 映射为计算属性。

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['doubleCount', 'doneTodos'])
}

3. mapMutations

将 store 的 mutation 映射为 methods。

import { mapMutations } from 'vuex'

methods: {
  ...mapMutations(['increment', 'setUser'])
}

4. mapActions

将 store 的 action 映射为 methods。

import { mapActions } from 'vuex'

methods: {
  ...mapActions(['fetchUser', 'incrementAsync'])
}

五、动态模块注册与卸载

在某些场景下，我们需要在运行时动态添加或移除模块。

✅ 注册模块

store.registerModule('userModule', userModule)

✅ 卸载模块

store.unregisterModule('userModule')

📌 注意：注册后可以通过 root: true 调用模块中的方法。

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

七、Vuex 最佳实践建议

八、总结对比表

九、结语

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