第三节：Mutations

Mutations修改状态的值

Vue的视图是由数据驱动的，也就是说state里面的数据是动态变化的，那么怎么改变呢，切记在Vuex中store数据改变的唯一方法就是mutation！什么意思？也就算说我们不能够直接通过一个事件或方法去修改state中的状态，必须将事件提交（commit）给mutation，并且事件接收state作为第一个参数。

通俗的理解，mutations里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。

每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。事件类型就是通过$store.commit()提交的事件，比如：$store.commit('add')，回调函数就是我们实际进行状态更改的地方，它作为store中的mutations对象里的一个属性而存在。

下面通过例子来一看究竟：

通过$store.commit()的方式提交

1、在组件中

<div>
      <h1>{{ msg }}</h1>
      <div>{{ count }}</div>
      <!--调用type 触发回调-->
      <button @click = "$store.commit('add')">+</button>
      <button @click = "$store.commit('reduce')">-</button>
  </div>

2、在store.js中定义一个常量mutations对象。

const mutations = {
    add(state){ //注册事件  type:add  回调第一个参数是state
        state.count++
    },
    reduce(state){
        state.count--
    }
}

然后将mutations和state导出去

export default new Vuex.Store({
    state,
    mutations
})

3、组件中引入store

import store from '@/vuex/store'

export default {
     data(){
        return {
            msg: "加减运算"
        }
    },
    store,
    computed:mapState([
        'count'
    ])
}

传值（提交载荷（Payload））

刚才只是一个简单的修改state中的属性，而在实际项目中往往会有值传递。

$store.commit()接收额外的参数，称之为mutations的载荷。

1、比如我们在加减时分别传入不同的参数

<button @click = "$store.commit('add', 20)">+</button>
<button @click = "$store.commit('reduce', 10)">-</button>

2、在mutations中接收参数

const mutations = {
    add(state, val){
        state.count += val
    },
    reduce(state, val){
        state.count -= val
    }
}

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读。

<!--需要注意的是，对象中的属性一定要加引号-->
<button @click = "$store.commit('add', { 'amount': 20 } )">+</button>
<button @click = "$store.commit('reduce', { 'amount': 10 } )">-</button>

const mutations = {
    add(state, val){
        state.count += val.amount
    },
    reduce(state, val){
        state.count -= val.amount
    }
}

对象风格的提交方式

还有一种提交方式是对象风格的提交，也就是提交mutation的时候直接使用type属性的对象。

上代码吧：

<button @click = "$store.commit({type: 'add', 'num': 20})">+</button>
<button @click = "$store.commit({type: 'reduce', 'num': 10})">-</button>

同理，在实际开发中，如果一个组件有多个事件，在模板中通过$store.commit()这种方式来提交mutation和传值，肯定会造成代码冗余且不利于维护。可以通过mapMutations辅助函数将组件中的 methods 映射为 store.commit 调用。

在组件中提交Mutations

1、首先引入mapMutations

import { mapState, mapMutations } from 'vuex'

2、添加methods属性，并加入mapMutations

export default {
    data() {
        return {
            msg: "加减运算"
        }
    },
    store,
    computed: mapState([
        'count'
    ]),
    // methods: mapMutations([
    //     'add', 'reduce'
    // ]),

    //或者
    methods: {
        //如果组件中事件的名称和mutations中方法的名称相同，可以传一个字符串数组
        ...mapMutations([
            'add'  //映射 this.add() 为 this.$store.commit('add')
        ]),
        //组件中的事件名和mutations中的方法名不一样，传入对象
        ...mapMutations({
            reduces: 'reduce' //映射 $this.reduces 为 this.store.commit('reduce')
        })
    }
}

Mutations必须是同步函数

一条重要的原则是Mutations必须是同步函数。

store.commit('add')
//任何由add事件改变的状态都应该在此刻完成。