解释 Vuex 中的 commit 和 dispatch 方法在触发 Mutations 和 Actions 时的区别。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，欢迎来到我的Vuex脱口秀！今天的主题是：commit和dispatch，Vuex里的两员大将，名字听着挺唬人，但搞清楚他们的区别，就像搞清楚了煎饼果子里放几个鸡蛋一样简单。

咱们先来打个招呼，我是你们的Vuex老司机，今天就带大家一起飙车，不对，是深入理解commit和dispatch，保证你们听完之后，腰不酸了，腿不疼了，一口气能写十个Vuex模块！

开场白：Vuex宇宙的基石

Vuex，这个Vue.js的状态管理模式，就像一个中央银行，负责管理整个应用的状态。而commit和dispatch，就是这个银行里的两扇大门，一个通往“Mutation窗口”，一个通往“Action办事处”。

第一幕：Mutation窗口——简单粗暴改数据

想象一下，Mutation就像银行里的一个“数据快速修改窗口”。你拿着“修改申请”（payload），直接递给窗口里的工作人员（mutation函数），他们看一眼申请，确认没问题，立刻修改账本（state）。整个过程简单粗暴，效率极高，但是！非常非常重要的一点：Mutation必须是同步的！

为什么必须同步？因为Vuex需要追踪每一次状态的变化，如果mutation里有异步操作，Vuex就无法准确地记录历史，debug就成了噩梦。想象一下，你的银行账单里，一会儿显示存了100，一会儿显示取了50，但是时间线乱七八糟，你能搞清楚钱到底去哪儿了吗？

代码示例：Mutation窗口的日常

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
    incrementBy(state, payload) { // payload 可以是任意类型的数据
      state.count += payload
    }
  }
})

// 组件中
methods: {
  add() {
    this.$store.commit('increment') // 直接调用mutation
  },
  subtract() {
    this.$store.commit('decrement')
  },
  addFive() {
    this.$store.commit('incrementBy', 5) // 传递payload
  }
}

解释一下：

store.js定义了Vuex的store，包括state和mutations。
increment、decrement和incrementBy都是mutation函数，它们直接修改state。
组件中使用this.$store.commit()来触发mutation，第一个参数是mutation的名称，第二个参数是payload（可选）。

重点总结：Mutation的特点

同步执行： 必须是同步的，不允许有异步操作。
直接修改State： 直接修改state的值。
使用commit触发： 通过store.commit('mutationName', payload)来触发。
必须是纯函数： 给定相同的输入，必须产生相同的输出，并且没有副作用。（虽然在Vuex的实现中，允许读取外部状态，但从概念上理解，最好将其视为纯函数。）

第二幕：Action办事处——异步操作的中转站

Action就像银行里的“综合业务办理处”。你提交一个“业务申请”（action），Action会处理一些复杂的业务逻辑，比如调用API、发送请求等等，这些操作通常是异步的。处理完毕后，Action会“通知”Mutation窗口去修改数据。

为什么需要Action？因为有些操作不能直接修改state，比如从服务器获取数据。你不能直接在mutation里发起HTTP请求，因为这是异步的。所以，你需要Action来处理这些异步操作，然后再通过commit来触发mutation，最终修改state。

代码示例：Action办事处的日常

// store.js
const store = new Vuex.Store({
  state: {
    count: 0,
    isLoading: false,
    data: null
  },
  mutations: {
    increment(state) {
      state.count++
    },
    setLoading(state, isLoading) {
      state.isLoading = isLoading
    },
    setData(state, data) {
      state.data = data
    }
  },
  actions: {
    async incrementAsync({ commit }) { // 解构commit
      setTimeout(() => {
        commit('increment') // 异步操作结束后，commit mutation
      }, 1000)
    },
    async fetchData({ commit }) {
      commit('setLoading', true) // 开始加载数据
      try {
        const response = await fetch('https://api.example.com/data') // 模拟API请求
        const data = await response.json()
        commit('setData', data) // 数据加载成功
      } catch (error) {
        console.error('Error fetching data:', error)
        // 处理错误，可以 commit 一个 error mutation
      } finally {
        commit('setLoading', false) // 结束加载
      }
    }
  }
})

// 组件中
methods: {
  addAsync() {
    this.$store.dispatch('incrementAsync') // 调用action
  },
  getData() {
    this.$store.dispatch('fetchData')
  }
}

解释一下：

incrementAsync是一个异步action，它使用setTimeout模拟一个异步操作，然后在1秒后commit increment mutation。
fetchData是一个更复杂的action，它首先commit setLoading mutation来显示加载状态，然后发起API请求，获取数据后commit setData mutation来更新数据，最后commit setLoading mutation来隐藏加载状态。
组件中使用this.$store.dispatch()来触发action，第一个参数是action的名称。

重点总结：Action的特点

异步执行： 可以包含异步操作，比如API请求、定时器等等。
间接修改State： 通过commit mutation来修改state。
使用dispatch触发： 通过store.dispatch('actionName', payload)来触发。
接收context对象： Action函数接收一个context对象，包含state、commit、dispatch、getters和rootState、rootGetters。通常使用解构赋值 { commit } 来简化代码。

第三幕：Commit与Dispatch的爱恨情仇——对比分析

现在，我们来做一个更直观的对比，看看commit和dispatch到底有什么不同：

特性	`commit` (Mutation)	`dispatch` (Action)
执行方式	同步	异步
修改State	直接	间接（通过commit mutation）
触发方式	`store.commit('mutationName', payload)`	`store.dispatch('actionName', payload)`
函数参数	`(state, payload)`	`(context, payload)`，context包含`commit`, `dispatch`等
适用场景	简单的、同步的状态修改	复杂的、异步的业务逻辑，比如API请求
是否可以链式调用	不可以	可以 (Promise)

第四幕：Payload的艺术——传递数据的各种姿势

无论是commit还是dispatch，都可以传递payload。Payload可以是一个简单的值，也可以是一个对象。

// 传递简单值
this.$store.commit('incrementBy', 5)
this.$store.dispatch('fetchData', 'userID123')

// 传递对象
this.$store.commit('updateUser', { id: 1, name: 'John Doe' })
this.$store.dispatch('saveUser', { id: 1, name: 'John Doe' })

在mutation和action中，你可以直接访问payload：

mutations: {
  incrementBy(state, payload) {
    state.count += payload
  },
  updateUser(state, payload) {
    state.users[payload.id] = payload
  }
}

actions: {
  fetchData({ commit }, userId) {
    // 使用userId发起API请求
    // ...
  },
  saveUser({ commit }, user) {
    // 使用user对象保存用户信息
    // ...
  }
}

第五幕：模块化Vuex——更清晰的代码结构

当你的应用变得越来越复杂，你需要将Vuex store拆分成多个模块。每个模块可以有自己的state、mutations、actions、getters，甚至可以嵌套子模块。

// modules/user.js
const userModule = {
  namespaced: true, // 开启命名空间
  state: {
    profile: null
  },
  mutations: {
    setProfile(state, profile) {
      state.profile = profile
    }
  },
  actions: {
    async fetchProfile({ commit }, userId) {
      // 从服务器获取用户信息
      const profile = await fetchUserProfile(userId)
      commit('setProfile', profile)
    }
  },
  getters: {
    fullName: state => {
      return state.profile ? `${state.profile.firstName} ${state.profile.lastName}` : ''
    }
  }
}

// store.js
const store = new Vuex.Store({
  modules: {
    user: userModule
  }
})

// 组件中
methods: {
  getUserProfile() {
    this.$store.dispatch('user/fetchProfile', 'userID123') // 访问模块中的action
  },
  updateUserName(newName) {
    //使用 commit 访问模块中的 mutation
    this.$store.commit('user/setProfile', {firstName: newName})
  }
}

解释一下：

namespaced: true 开启了命名空间，这意味着你需要使用模块名来访问模块中的mutation、action和getter。
在组件中，你需要使用this.$store.dispatch('user/fetchProfile')来触发user模块中的fetchProfile action。同样的，使用this.$store.commit('user/setProfile')来触发user模块中的setProfile mutation。
getter 也可以使用 this.$store.getters['user/fullName'] 来访问

第六幕：辅助函数——让代码更简洁

Vuex提供了一些辅助函数，可以让你在组件中更方便地访问state、getter、mutation和action。

mapState: 将 state 映射到组件的计算属性。
mapGetters: 将 getters 映射到组件的计算属性。
mapMutations: 将 mutations 映射到组件的方法。
mapActions: 将 actions 映射到组件的方法。

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count, // 简写： count: 'count'
      isLoading: state => state.isLoading
    }),
    ...mapGetters([
      'doubleCount' // 映射 this.doubleCount 为 store.getters.doubleCount
    ])
  },
  methods: {
    ...mapMutations([
      'increment', // 映射 this.increment() 为 this.$store.commit('increment')
      'decrement'
    ]),
    ...mapActions({
      addAsync: 'incrementAsync', // 映射 this.addAsync() 为 this.$store.dispatch('incrementAsync')
      getData: 'fetchData'
    })
  }
}

使用辅助函数可以大大简化代码，提高开发效率。

第七幕：进阶技巧——Action的链式调用

Action可以返回一个Promise，这意味着你可以链式调用多个Action。

// store.js
actions: {
  async actionA({ commit, dispatch }) {
    await dispatch('actionB')
    commit('mutationA')
  },
  async actionB({ commit }) {
    return new Promise(resolve => {
      setTimeout(() => {
        commit('mutationB')
        resolve()
      }, 1000)
    })
  }
}

// 组件中
methods: {
  doActions() {
    this.$store.dispatch('actionA')
      .then(() => {
        console.log('actionA和actionB都执行完毕')
      })
  }
}

在这个例子中，actionA首先dispatch actionB，然后等待actionB执行完毕后，再commit mutationA。

第八幕：最佳实践——避免踩坑

不要在mutation中执行异步操作。 这是Vuex最基本的原则，也是最容易犯的错误。
合理使用payload。 payload可以传递任何类型的数据，但是要尽量保持简单清晰。
使用模块化Vuex。 当你的应用变得复杂时，使用模块化可以更好地组织代码。
使用辅助函数。 辅助函数可以简化代码，提高开发效率。
注意命名空间。 当使用模块化Vuex时，要确保正确使用命名空间。
谨慎使用rootState和rootGetters。 尽量避免在模块中使用rootState和rootGetters，因为这会增加模块之间的耦合度。

总结：Commit与Dispatch的完美配合

commit和dispatch就像Vuex的两条腿，一个负责同步修改数据，一个负责异步处理逻辑。只有它们完美配合，才能让你的Vuex store运转自如。

记住，commit是快速通道，直接修改state，但是必须同步；dispatch是中转站，处理异步逻辑，然后通过commit修改state。

希望通过今天的讲解，大家对commit和dispatch有了更深入的理解。下次再遇到Vuex的问题，不要慌，想想commit和dispatch，一切都会迎刃而解！

感谢大家的观看！下次再见！

发表回复 取消回复

发表回复取消回复