vuex mutations 同步操作方法详解

// state中定义一些初始数据用来举例
state: {
  // 定义一个数字
  count: 0,
  // 定义一个对象
  coderyg: {
    name: 'coderyg',
    age: 25,
    height: 1.93
  },
  // 定义一个字符串
  info: 'swk'
}

// App.vue
<p>{{ $store.state.count }}</p> //此时的count是0
<button @click="addCount">+</button>
<button @click="subCount">-</button>
// 提交同步
addCount() {
  this.$store.commit('increment');
},
subCount() {
  this.$store.commit('decrement');
}
// index.js
// 接收同步
increment(state) {
  state.count ++;
},
decrement(state) {
  state.count --;
}

// App.vue
<p>{{ $store.state.count }}</p> //此时的count是0
<button @click="changeNum(+5)">+5</button>
<button @click="changeNum(-5)">-5</button>
// 提交同步--直接提交参数，num是一个数字
changeNum(num) {
  this.$store.commit('addNum', num);
}
// index.js
// 接收同步
addNum(state, num) {
  state.count += num;
}

// App.vue
<p>{{ $store.state.count }}</p> //此时的count是0
<button @click="changeNum(+5)">+5</button>
<button @click="changeNum(-5)">-5</button>
// 提交同步--对象方式提交会以整个payload提交过去，通过payload.XX拿取提交过去的信息
changeNum(num) {
  this.$store.commit(从这开始{
    type: 'addNum',
    num
  }到这结束是payload);
}
// index.js
// 接收同步
addNum(state, payload) {
  state.count += payload.num;
}