解释 Vuex 中的 Mutations 为什么必须是同步的，以及 Actions 为什么可以是异步的。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位同学，早上好！今天咱们来聊聊 Vuex 这个家伙，以及它里面两个重要的角色：Mutations 和 Actions。大家都知道，Vuex 是 Vue.js 的状态管理模式，它就像一个集中营，把咱们应用里的数据都关在里面，方便统一管理。但是，这个“集中营”的管理方式有点特殊，Mutations 必须是同步的，而 Actions 却可以异步，这到底是为什么呢？别着急，咱们慢慢来，保证让大家听明白，听开心！

一、状态的“生死簿”：Mutations

首先，咱们得搞清楚 Mutations 是干啥的。简单来说，Mutations 就是 Vuex 里面负责修改 state （状态）的“生死簿”。你想改哪个数据，就得通过 Mutations 来登记一下，走个流程。

// Vuex 的 store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  }
})

// 在组件中使用
store.commit('increment') // 提交一个 mutation
console.log(store.state.count) // -> 1

上面的代码里，increment 和 decrement 就是两个 mutations。它们的作用就是修改 state 里面的 count 值。注意，要修改 state，你必须调用 store.commit() 方法，然后传入 mutation 的名字。

为啥 Mutations 必须是同步的？

想象一下，如果 Mutations 允许异步操作，会发生什么？假设咱们有一个 Mutation 叫 asyncIncrement，它里面用 setTimeout 模拟了一个异步操作：

mutations: {
  asyncIncrement(state) {
    setTimeout(() => {
      state.count++
    }, 1000)
  }
}

然后，咱们在组件里调用它：

store.commit('asyncIncrement')
console.log(store.state.count) // 咦？ 还是 0
setTimeout(() => {
  console.log(store.state.count) // 一秒后，变成了 1
}, 1000)

你发现问题了吗？当咱们调用 store.commit('asyncIncrement') 之后，console.log(store.state.count) 立即执行，打印出来的还是 0。一秒后，state.count 才被修改成 1。这就意味着，咱们无法追踪状态的变化！

Vuex 需要知道每一次状态变化的确切时间，方便进行调试和追踪。如果 Mutations 是异步的，Vuex 就无法准确记录状态变化的历史，调试工具也就失去了意义。就像你去看病，医生给你开了药，但你不知道药什么时候生效，这药还能吃吗？

更重要的是，如果多个异步 Mutations 同时修改同一个 state，结果就更不可预测了，就像一锅乱炖，谁也不知道最后炖出来是什么味道。

为了保证状态变化的可追踪性，Mutations 必须是同步的。

二、幕后操控者：Actions

既然 Mutations 只能做同步操作，那如果咱们想在 Vuex 里面进行异步操作，比如发送一个 API 请求，该怎么办呢？这就轮到 Actions 出场了！ Actions 就像幕后操控者，它们可以包含任意异步操作，然后通过提交 Mutations 来修改 state。

actions: {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  },
  fetchData({ commit }) {
    return new Promise((resolve, reject) => {
      // 模拟 API 请求
      setTimeout(() => {
        const data = { name: '张三', age: 18 }
        commit('setData', data) // 提交 mutation
        resolve(data)
      }, 2000)
    })
  }
},
mutations: {
  setData(state, data) {
    state.userData = data
  }
}

上面的代码里，incrementAsync 和 fetchData 都是 actions。

incrementAsync 里面用 setTimeout 模拟了一个异步操作，然后提交了 increment mutation。
fetchData 里面模拟了一个 API 请求，请求成功后，提交了 setData mutation，把数据存到 state 里面。

Actions 为什么可以是异步的？

Actions 的主要职责是处理业务逻辑，而不是直接修改 state。它们可以发起 API 请求、调用其他 actions，或者执行任何你想执行的异步操作。最终，Actions 会通过提交 Mutations 来修改 state。

由于 Actions 只是负责“调度” Mutations，而不是直接修改 state，所以它们可以是异步的。这样，咱们就可以在 Vuex 里面处理复杂的异步逻辑，而不用担心状态变化的可追踪性问题。

Actions 的使用方式

在组件里，咱们使用 store.dispatch() 方法来触发 Actions：

// 在组件中使用
store.dispatch('incrementAsync') // 触发 incrementAsync action

store.dispatch('fetchData').then(data => {
  console.log('数据获取成功', data)
})

store.dispatch('incrementAsync') 会触发 incrementAsync action。
store.dispatch('fetchData') 会触发 fetchData action，并且返回一个 Promise 对象。咱们可以使用 .then() 方法来处理异步操作的结果。

三、 Mutations vs Actions：一场精彩的辩论赛

为了让大家更好地理解 Mutations 和 Actions 的区别，咱们来一场辩论赛：

正方（Mutations）：

我们是状态的直接修改者，权力掌握在手，修改 state 必须经过我们！
我们必须是同步的，保证状态变化的可追踪性，方便调试！
我们就像银行柜员，每一笔交易都必须清清楚楚，明明白白！

反方（Actions）：

我们是幕后操控者，负责处理复杂的业务逻辑，你们搞不定的事情，都交给我们！
我们可以是异步的，发起 API 请求、调用其他 actions，无所不能！
我们就像项目经理，负责分配任务、协调资源，最终目标是完成项目！

总结陈词：

Mutations 和 Actions 各司其职，共同维护 Vuex 的状态。 Mutations 负责同步修改 state，保证状态变化的可追踪性；Actions 负责处理异步逻辑，最终通过提交 Mutations 来修改 state。它们就像一对黄金搭档，缺一不可！

为了更好的理解，我们用表格形式进行总结：

特性	Mutations	Actions
职责	直接修改 state	处理业务逻辑，提交 Mutations
同步/异步	必须同步	可以异步
触发方式	`store.commit('mutationName', payload)`	`store.dispatch('actionName', payload)`
作用	保证状态变化的可追踪性，方便调试	处理异步操作，最终通过 Mutations 修改 state
返回值	无（void）	Promise 对象（通常用于处理异步操作的结果）
例子	`state.count++` , `state.name = payload`	API 请求，定时器，调用其他 actions

四、最佳实践：让你的 Vuex 代码更优雅

最后，咱们来分享一些 Vuex 的最佳实践，让你的代码更优雅：

使用常量代替 Mutation 和 Action 的名字：

// mutation-types.js
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

// action-types.js
export const INCREMENT_ASYNC = 'INCREMENT_ASYNC'
export const FETCH_DATA = 'FETCH_DATA'

// store.js
import { INCREMENT, DECREMENT } from './mutation-types'
import { INCREMENT_ASYNC, FETCH_DATA } from './action-types'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    [INCREMENT](state) {
      state.count++
    },
    [DECREMENT](state) {
      state.count--
    }
  },
  actions: {
    [INCREMENT_ASYNC]({ commit }) {
      setTimeout(() => {
        commit(INCREMENT)
      }, 1000)
    },
    [FETCH_DATA]({ commit }) {
      return new Promise((resolve, reject) => {
        // 模拟 API 请求
        setTimeout(() => {
          const data = { name: '张三', age: 18 }
          commit('setData', data) // 提交 mutation
          resolve(data)
        }, 2000)
      })
    }
  }
})

这样做的好处是：

避免拼写错误，减少 bug 的产生。
方便重构，修改名字只需要修改常量即可。
提高代码的可读性。

使用模块化：

当你的 Vuex store 变得越来越大时，可以将其拆分成多个模块，每个模块都有自己的 state、mutations、actions 和 getters。

// modules/count.js
const state = {
  count: 0
}

const mutations = {
  increment(state) {
    state.count++
  }
}

const actions = {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

const getters = {
  doubleCount: state => state.count * 2
}

export default {
  namespaced: true, // 开启命名空间
  state,
  mutations,
  actions,
  getters
}

// store.js
import Vuex from 'vuex'
import count from './modules/count'

const store = new Vuex.Store({
  modules: {
    count
  }
})

// 在组件中使用
store.commit('count/increment') // 提交 count 模块的 mutation
console.log(store.getters['count/doubleCount']) // 获取 count 模块的 getter

使用模块化可以：

提高代码的可维护性。
方便团队协作。
避免命名冲突。

使用 Vuex Devtools 进行调试：

Vuex Devtools 是一个强大的调试工具，可以帮助你追踪状态变化、查看 mutations 和 actions 的调用历史。

安装 Vuex Devtools 之后，你可以在 Chrome 开发者工具中找到 Vuex 选项卡。

注意 State 的不可变性

尽管可以直接在 Mutation 中修改State，但为了更好的可追踪性和可预测性，建议遵循不可变性原则。尽量避免直接修改State，而是通过创建新的State对象来更新。比如使用扩展运算符…或者Object.assign()

mutations: {
  updateUser(state, payload) {
    // 不要这样做： state.user.name = payload.name;  // 直接修改
    state.user = {...state.user, ...payload}; // 创建新的对象
  }
}

使用辅助函数

Vuex提供了一些辅助函数，例如 mapState、mapGetters、mapMutations 和 mapActions，可以简化组件中对 Vuex 状态、getter、mutation 和 action 的访问。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

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

五、总结

今天咱们一起学习了 Vuex 中 Mutations 和 Actions 的区别，以及为什么 Mutations 必须是同步的，而 Actions 可以是异步的。记住，Mutations 是状态的“生死簿”，负责同步修改 state，保证状态变化的可追踪性；Actions 是幕后操控者，负责处理异步逻辑，最终通过提交 Mutations 来修改 state。掌握了这些知识，你就可以更好地使用 Vuex 来管理你的 Vue.js 应用的状态了。

希望今天的讲座对大家有所帮助！如果有什么问题，欢迎随时提问。下课！

发表回复 取消回复

发表回复取消回复