跟着文档学Vuex(四):状态变更Mutations

不觉中我们已经来到了第四章,教程也走到了一半,上两节我们分别介绍了
State(状态),Getters(状态过滤)的用法,这里肯定要有朋友问了,那如果我想要修改状态里的数据怎么办,不要急,看完本章你一定能找到答案

如何调用

在Vuex中,更改state数据的唯一方法是提交mutation。Vuex中的mutation非常类似于事件;每个mutation都有一个字符串的事件类型和一个回调函数。废话不多说,看代码

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

如果有看上两节内容的同学一定会说,那调用是不是这么写

//this.store.mutations.increment()

恭喜你,答错了,因为他是一个mutaition handler,所以你不能直接调用,这个更像是事件注册: “当触发一个类型为increment的mutation时,调用此函数。” 要唤醒一个mutation handler,你需要以相应的type调用 store.commit方法:

this.store.commit('increment')

提交载荷(Payload)

你可以向store.commit传入额外参数,即mutation的载荷(payload)

mutations: {
  increment (state, n) {
    state.count += n
  }
}
this.store.commit('increment', 10)

大多数情况下,载荷最好用对象形式传入,这样会更易读

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
this.store.commit('increment', {
  amount: 10
})

还可以使用对象风格的提交方式

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

减轻负担的老朋友 mapMutations

使用方法还是老规矩

import { mapMutations } from 'vuex'

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

怎么样,是不是熟悉的配方,熟悉的味道,下一节,我们要学习Actions的用法,同学们记得提前预习哦~

引用

https://vuex.vuejs.org Vuex官方文档

推荐阅读更多精彩内容