mutation vue中更新状态的唯一方式 

state: { 
    counter: 1000,
}
mutations: {
    //add称为事件类型 从后面的小括号开始叫做回调函数
    add(state) {
      state.counter++;
    },

使用 

<button @click="add()">+</button>
<h2>{{ $store.state.counter }}</h2>

methods: {
    // 调用mutations用commit
    add() {
      this.$store.commit("add");
    },
}

commit调用mutation需要传参时

普通提交风格 

 <button @click="addCount">+5</button>
  <button @click="addCount">+10</button>


    
      addCount(count) {
      // mutation普通提交风格
          this.$store.commit("addCounter", count);
      }



mutations: {
    addCounter(state, count) {
      state.counter += count;
    },
}
commit("addCounter",count)里的count可以是上面click中的参数。也可以click时间不传参，click方法中自己定义参数、或者是data中的属性。

特殊提交风格 

this.$store.commit({
  type: 'addCounter',
  stu, //stu: 'stu'
  age: 20
})
const stu = {name: 'a',age: 18}
当我们commit是一个对象的时候，就用到了之前说的 mutation方法的方法名被称为事件类型，在这里对应的key就是type，count使用ES6语法为之前定义好的count属性。 
addStu(state, payload) {
  state.students.push(payload.stu);
},
addStu中第二个参数payload就变成了由commit提交的所有参数组成的对象

如果对在state中没有定义的状态进行操作需要使用Vue.set(),Vue.delete()将他们加入Vue的响应式中 


state: {
   info: {
      name: 'c',
      height: '186',
      age: 21
    }

}

update(state,payload){
      // state.info.name = 'q'
      // Vue.set()会将传入的属性加入响应式
      // 如果只是state.info['address'] = 'HK' 不会加到响应式
      // Vue.set(state.info,'address','HK')
      // Vue.delete(state.info,'age')
      state.info.name = payload
}