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')` }) } }