Mutations理解

Mutations理解

Mutations状态跟新

mutations: {
  //方法,默认就有一个参数是state
  increment(state) {
    state.counter++
  },
  decrement(state) {
    state.counter--
  }
},

上边的increment和decrement就是字符串的事件类型

后边的紧跟函数就是回调函数,默认state为第一个参数

Mutations参数传递

addCount(count) {
  this.$store.commit('incrementCount',count)
},
addStudent() {
  const stu = {id: 154, name: 'why52', age: 148}
  this.$store.commit('addStudent',stu)
}

提交Mutations来改变状态，同时传入一个额外的参数，如果参数过多，可以将参数合并成一个对象传入。

incrementCount(state, count) {
  state.counter += count
},
addStudent(state,stu) {
    state.student.push(stu)
}

在Mutation里接受参数并且执行对应的状态修改

Mutations的提交风格

addCount(count) {
  // 1.普通提交风格
  this.$store.commit('incrementCount', count)
  //2.特殊提交风格
  this.$store.commit({
    type: 'incrementCount',
    count
  })
},

采用第二种提交方式时，采用es6简写count:count,如果有多个参数都可以依次这样写传过去

incrementCount(state, payload) {
  //state.counter += count
  state.counter += payload.count
},

同样的如果采用第二种提交方式，我们在Mutations方法里接收到的就不是单独的参数了，而是一个参数对象，也就是上边说的参数过多时如何提交