Vue基础教程（195）Vuex中的mutation对象：别让你的Vue应用乱改数据！来认识Vuex里的“倔驴”mutation

嘿，兄弟们！今天咱们来聊聊Vuex里那个让人又爱又恨的mutation对象。我知道，刚学Vuex时你可能觉得：“这不就是个函数仓库吗？有啥难的？”结果用着用着就发现，这玩意儿倔得像头驴，不按它的规矩来就给你脸色看。

别急，我当初也一样。但搞懂mutation后才发现，它其实是Vuex中最靠谱的“数据守门员”。来，跟着我一起拆解这个看似简单实则暗藏玄机的家伙。

一、mutation是啥？为啥需要这个“多管闲事”的家伙？

想象一下，你家有个谁都能随便拿钱的存钱罐。今天小明拿点买零食，明天小红拿点买贴纸，没过几天发现钱没了，还没人承认是谁拿的。乱不乱？太乱了！

Vue应用中的数据就像这个存钱罐。多个组件都可能修改同一份数据，如果没有统一管理，调试起来简直就是噩梦：“这数据到底是被谁改的？什么时候改的？为什么改成这样？”

所以Vuex派出了mutation这位“财务总监”，立下规矩：所有状态变更，必须通过我提交申请！

mutation本质上就是一个函数，但它有个特权——只有它能直接修改Vuex store中的state。就像公司里不是谁都能直接动公章一样，不是哪个组件都能直接改全局状态。

// 这就是一个最简单的mutation
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    // 这个increment就是mutation
    increment(state) {
      state.count++ // 只有mutation能直接修改state
    }
  }
})

二、mutation的倔脾气：必须遵守的规矩

mutation之所以让人觉得“倔”，是因为它有几个雷打不动的原则：

1. 必须是同步函数

这是最重要的一条！mutation里不能放异步操作，否则你的开发工具调试会变得一团糟。

// ❌ 错误示范：在mutation里搞异步
mutations: {
  asyncIncrement(state) {
    setTimeout(() => {
      state.count++ // 这样调试工具会跟踪不到状态变化
    }, 1000)
  }
}

// ✅ 正确做法：异步操作放在action中
actions: {
  asyncIncrement({ commit }) {
    setTimeout(() => {
      commit('increment') // action完成异步后提交mutation
    }, 1000)
  }
}

2. 只能通过commit触发

想调用mutation？不好意思，请走正规流程——提交commit。

// 在组件中这样调用
this.$store.commit('increment')

// 或者使用mapMutations辅助函数
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['increment']),
    handleClick() {
      this.increment() // 直接调用即可
    }
  }
}

3. 参数传递有讲究

mutation最多接收两个参数：第一个永远是state，第二个是payload（载荷）。

mutations: {
  // 接收单个值
  addCount(state, num) {
    state.count += num
  },
  
  // 接收对象
  updateUser(state, userInfo