mutations

Vuex store状态的更新唯一方式：提交(commit) mutations

Mutations主要包括两部分：
1.字符串的事件类型（type）
2.一个回调函数，该回调函数的第一个参数就是state，还可以传入第二个参数（mutation的载荷 Payload ）

image.png

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    counter: 10

  },
  mutations: {
    incrementCount(state, count) {
      state.counter += count;
    }
  }

})
export default store

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

methods:{
    // addCount(count){
    //   this.$store.commit('incrementCount',count)
    // }

    //对象风格的提交方式
    addCount(count){
      this.$store.commit({
        type:'incrementCount',
        count
      })
    }
  }

注意mutation的第二个参数是对象

  mutations: {
    // incrementCount(state, count) {
    //   state.counter += count;
    // }

    //对象提交风格对应的mutation
    incrementCount(state, payload) {
      console.log(payload) //{type: "incrementCount", count: 5}
      state.counter += payload.count
    }

  }

使用常量替代 Mutation 事件类型

mutations-types.js

export const INCREMENT_COUNT = 'incrementCount'

App.vue

store

import Vue from 'vue'
import Vuex from 'vuex'
import {
  INCREMENT_COUNT
} from './mutations-types'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    counter: 10
  },
  mutations: {
    [INCREMENT_COUNT](state, count) {
      state.counter += count
    }
  }

})
export default store

Mutation 必须是同步函数

如果是异步，当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用，导致无法追踪状态。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    student: {
      age: 18,
      name: 'haha'
    }
  },
  mutations: {
    updateStudent(state) {
      setTimeout(() => {
        state.student.name = 'aa'
      }, 1000)
    }
  }

})
export default store

上面的代码 由于mutations里有异步操作，devtools无法追踪，视图上，student对象的name属性

image.png

如何处理异步问题？使用actions

mapMutations辅助函数

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({

  state: {
    counter: 10
  },
  mutations:{
    increment(state){
      state.counter += 1
    }
  }
})
export default store

mapMutations也支持对象形式的映射