Vuex核心概念之Mutations

1. 有了 state 以及 getters 的基础,mutations 实际上也很容易理解,详解可以直接看官方文档,个人只总结一下重要知识点:

【1】改变 state 不能直接获取去改变,应该通过 mutations,只有这样才能够记录状态的变化

【2】mutations 只能执行同步操作,不可以执行异步操作,否则无法记录异步操作对状态的改变,异步操作需要 actions

【3】mutations 可以考虑使用 常量 去代替 mutation 事件类型

【4】在使用 mutations 时,不是类似方法那样直接调用,而是通过 this.$store.commit('xxx')

【5】mutations 的 payload 负荷【实际上就是额外参数】:用法直接贴代码:

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

两种风格写法:

store.commit('increment', {
  amount: 10
})

以及

store.commit({
  type: 'increment',
  amount: 10
})

【6】在组件中使用 mutations:【转自官方文档 :https://vuex.vuejs.org/zh/guide/mutations.html】

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷:
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

 

上一篇:Vuex的使用


下一篇:Vuex核心用法,一学就会!(中秋特辑,快来get你的月饼啦)