新手Vuex入门之mutations第三篇

3.mutations

通过第一篇跟第二篇,我们知道了如何去定义和获取store里面的状态数据，但是光会定义跟获取肯定是不够的，很多的场景需要对这些状态进行操作跟修改，那么具体如何操控呢？这就是本篇要讲的重点。重点来啦

1.只有mutation能修改跟设置state

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    // 事件类型 type 为 increment
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

注意，我们不能直接 store.mutations.increment() 来调用，Vuex 规定必须使用 store.commit 来触发对应 type 的方法：

store.commit('increment')

2.我们可以向事件类型(type)传参,如下：

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

// 调用
store.commit('increment', 10)

官方文档给这个参数取了一个高大上的名字，叫mutation的载荷（payload）在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的mutation会更易读：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

3.关于store.commit来触发mutation对应type的方法有两种,看下面示例

//把type跟载荷分开
store.commit('increment',{
    amount:8
})
//把整个对象都传给mutation函数
store.commit({
    type:'increment',
    amount:8
})

当然使用哪个方式，完全属于个人喜欢，没什么绝对限制，挑一种自己喜欢的就好

在组件中也可以这样调用：

<template>
<!--需要注意的是，对象中的属性一定要加引号-->
<!--调用type 触发回调-->
<button @click = "$store.commit('increment',9)">+</button>
<button @click ="$store.commit({type:'increment','amount':9})">+</button>
</template>

或者在methods对象中调用，需要Vuex中的一些辅助函数，这里先不讲述了

4.Mutation需遵守Vue的响应规则

如果你在state对象定义的是一些基础类型的状态数据，修改起来倒是简单，如果定义的是一个对象并且你想要对此对象做些修改，那就要注意了，因为这里涉及到几个需要注意的点。看下面的示例：

const store = new Vuex.Store({
    state:{
        car:{
            brand:'大众',
            color:'white'
        }
    }
})

这个时候，我们想给car添加一个price属性，怎么办呢？是的，直接在color下面添加也可以，这样是最好的。如果我们需要动态添加呢？那就得遵循Vue的响应规则了，如下所示：

const store = new Vuex.Store({
    state:{
        car:{
            brand:'大众',
            color:'white'
        }
    },
    mutation:{
        addPrice(state) {
            Vue.set(state.car, 'price', 180000)
            // 或者：
            // state.car = { ...state.car, price: 180000 }
        }
    }
})

以上就是给对象动态添加属性的两种方式，对于已添加的对象，想要修改其属性，可以直接更改，比如文中的例子，我想要把刚给汽车添加价格属性作下修改，那么store.state.car.price = '150000’即可。

至于为什么要这样，之前我们了解过，因为store中的状态是响应式的，当我们更改状态数据的时候，监视状态的Vue组件也会自动更新，所以 Vuex 中的 mutation 也需要与使用 Vue 一样遵守这些规则。

5.使用常量替代mutations中的事件类型（type）

就是使用常量来替代 mutation 事件的名字。使用常量替代mutation事件类型在各种 Flux 实现中是很常见的模式。这样可以使linter之类的工具发挥作用，同时把这些常量放在单独的文件中可以让整个app包含的 mutation 一目了然：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。

6.mutation必须是同步函数

一条重要的原则就是要记住mutation必须是同步函数。为什么？请参考下面的例子：

const store = new Vuex.Store({
    state:{
        car:{
            brand:'大众',
            color:'white'
        }
    },
    mutation:{
        setColor(state) {//异步修改汽车的颜色
           new Promise((resolve,reject) => {
               state.color = 'blue';
           })
        }
    }
})

如上所示，如果是异步改变汽车的颜色，我们就不知道什么时候颜色会发生改变，所以也就无法追踪了，因为当 mutation 触发的时候，回调函数还没有被调用，这与 Mutation 的设计初心相悖，所以在 Vuex 中，mutation 都是同步事务：

store.commit('increment')
// 任何由 "increment" 导致的状态变更都应该在此刻完成。

写在最后的话：

Vuex提供了一些非常方便的辅助函数，比如mapState、mapGetters、mapMutations、mapActions,这些博主会专门整理一篇生意来主讲这些，因为它们都是为了解决同一个问题而存在的。

本文仅此个人对Vuex的理解，不正确的地方，希望大家指正跟留言交流，如对大家有帮助，欢迎转载跟点赞,谢谢！