Mutations

Mutations用于修改Store中的数据

注意

只有 mutations里的函数，才有权利修改 state 的数据
mutations里不能包含异步操作。

定义mutations方法

只能通过 mutations变更 Store数据，不可以直接操作 Store中的数据。
可以集中监控所有数据的变化

const store = new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    add(state){
      //变更状态
      state.count++
    }
  }
})

触发mutations

this.$store.commit()是触发 mutations的第一种方式

ChageAdd() {
  this.$store.commit('add')
},

mutations传参

AddNumber(){
  this.$store.commit('addNumber',5)
}

mutations: {
  addNumber(state,step){
    // 变更状态
    state.count += step
  }
},

MapMutations 映射为方法

触发mutations的第二种方式：

1.从vuex中按需导入 mapMutations函数
import {mapMutations} from 'vuex'

2.通过刚才按需导入的 mapMutations函数，映射为当前组件的methods函数。

// store
mutations: {
  add(state) {
    // 变更状态
    state.count++
  },
  sub(state) {
    state.count--
  },
  addNumber(state, step) {
    // 变更状态
    state.count += step
  },
  subNumber(state, step) {
    state.count -= step
  }
},

// 组件A
import { mapState,mapMutations } from 'vuex'
methods:{
  ...mapMutations(['sub','subNumber']),
  decrement(){
    // 调用 
    this.sub()
  },
  decrementN(){
    this.subNumber(5)
  }
}