这里主要包括两大内容：mutations传递的参数和mutations提交风格

一、基本结构

1.作用

Vuex的store状态的更新唯一方式：提交Mutation。也就是我们前面提到过的，必须经过 state --> Vuex --> Action --> Mutations 这个路径修改state的状态。

2.组成

mutations主要由两部分组成：事件类型和回调函数，具体的可以参考下面的代码：

const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
      increase(state){
        state.counter++
      },
      decrease(state){
        state.counter--
      }
    }
})

在上述的代码中，increase和decrease是事件类型，(state){state.counter++} 这部分是回调函数。

3.定义的方式

定义的方式很简单，就是事件类型+回调函数，具体查看下面的代码：

const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
      increase(state){
        state.counter++
      }
    }
})

上述代码中，定义的事件类型为increate，当执行该事件类型时，就会调用回调函数，执行对counter++的操作。
此外，如果想要通过mutations更新某些数据，可以使用commit方法，commit方法中传入的数据是事件类型。具体代码如下：

const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
     increase:function(){
        this.$store.commit('increate')
      }
    }
})

以上是对mutation的基本回顾，接下来进入今天的正题：传递参数

二、传递参数

1.传递变量

前面我们已经会通过调用increate函数对counter进行简单的加1操作，如果这个时候我们不再对counter进行简单的加1操作，而是加5甚至是加10，这个时候该怎么办呢？
很简单，只需要传递多一个参数即可，比如：

const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
     increateCounter(state,count){
        state.counter += count
      }
    }
})

在mutation中，声明increateCounter事件类型，然后回调函数主要是对counter做加上count的操作。在App.vue页面中调用该方法的代码如下：

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addcounter" >+</button>
    <button @click="deccounter" >-</button>
    <button @click="addCount(5)" >+5</button>
    <hellovue></hellovue>
  </div>
</template>
<script>
  import hellovue from './components/HelloWorld.vue'
export default {
  name: 'App',
  components:{
    hellovue
  },
  methods:{
    addcounter(){
      this.$store.commit('increase')
    },
    deccounter(){
      this.$store.commit('decrease')
    },
    addCount(count){
      this.$store.commit('increateCounter',count)
    }
  },
    data(){
        return {
            message:"我是组件1",
        }
    }
}
</script>

在methods方法中，对addCount点击事件的处理，主要是通过commit方法调用了Vuex中mutation声明的increateCounter，然后传递count作为参数，在本例中，参数count = 5，所以点击一次，counter的数值就会增加5，具体效果图如下所示：

如果我们传递的参数不再是变量这么简单，而是传递一个对象，又该怎么办呢？很简单，我们传递一个对象就可以啦。

2.传递对象

做法很简单，具体代码如下：

const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
     increateStu(state,stu){
        state.student.push(stu)
      }
    }
})

上述代码中，将stu参数添加到student对象中，在App.vue中调用该方法的代码如下：

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <button @click="addStu">添加学生</button>
    <hellovue></hellovue>
  </div>
</template>
<script>
  import hellovue from './components/HelloWorld.vue'
export default {
  name: 'App',
  components:{
    hellovue
  },
  methods:{
 addStu(){
      const stu = {id:500,name:'xiaoqi',age:30}
      this.$store.commit('increateStu',stu)
    }
  },
    data(){
        return {
            message:"我是组件1",
        }
    }
}
</script>

当点击了“添加学生”按钮之后，就会将stu对象中的数据添加到student对象中，具体效果如下：

以上便是mutation中有关传递参数的内容。

三、提交风格

1.commit

这是最简单的提交方式，在上面的例子中，小编也已经演示过了，这里就不再重复

2.type

这种风格的提交就是commit中提交的是一个对象，然后在type中传入具体要传入的数据，比如：

//App.vue
addCount(count){
    // 第一种提风格:commit
    this.$store.commit('increateCounter',count) 
    //第二种提交风格
    this.$store.commit({
      type:'increateCounter',
       count
      })
}
//index.js
const store = new Vuex.Store({
    state:{
      counter:100,
    },
    mutations:{
      // 提交风格
      increateCounter(state,payload){
        state.counter += payload.count
      }
    }
})

上述代码中，commit提交的是一个对象，然后在对象中有一个type类型，type后面填写事件类型，比如本例子中的increateCounter。
值得注意的是参数问题。在第一种提交风格中，count就是一个简简单单的数值，但是在第二中风格中，count是一个对象，所以我们需要通过 对象.属性名来获取具体的变量，比如本例中的 payload.count 就是获得count变量

以上便是有关于mutation中的两种提提交风格。

❤今天的内容就到这里啦~谢谢大家记得给小编点赞哟❤

Vue.js进阶系列(51)--Vuex中的mutations