Vuex-mutations：同步操作

作用：修改vuex中的state，只可以通过mutations修改

• 需要通过commit提交同步方法(1.只提交方法，参考实例1；2.携带参数提交，参考实例2)
• 同步方法中第一个默认参数是state，可以通过state.xx拿取state中已经定义好的数据

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

实例1：修改count(只提交方法)

// 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 --;
}

实例2.1：携带参数普通方法提交

// 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;
}

实例2.2：携带参数对象方法提交

// 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;
}