[Vuex系列] - Mutation的具体用法

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

接下来我们还是用上一篇文章在state中存放的count为例，来看利用Mutation修改state的count属性。

利用commit来触发mutation函数

在mutation函数中添加count的add函数

const mutations = {
  addNum (state) {
    state.num++
  },
  add (state) {
    state.count += 2
  }
}
export default mutations

在组件中使用mutation进行实现叠加器

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit('add')
    }
  }
}
</script>

Mutation的载荷（payload）

你可以向store.commit传入额外的参数，即mutation的载荷（payload）：我们还是以上面累加器的例子来实现mutation函数的传参，来动态定义累加的数量。

在mutation.js中修改add方法

const mutations = {
  addNum (state) {
    state.num++
  },
  add (state, n) {
    state.count += n
  }
}

export default mutations

在组件中store.commit如何传参

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit('add', 5)
    }
  }
}
</script>

在mutation传参（载荷）可以传递一个参数也可以传递一个对象。让我们修改下上面的例子

mutation.js文件中修改如下

const mutations = {
  addNum (state) {
    state.num++
  },
  add (state, payload) {
    state.count += payload.amount
  }
}

export default mutations

组件中修改如下

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit('add', { amount: 10 })
    }
  }
}
</script>

在store.commit中可以进行对象风格的提交

依据上面的例子，我们将组件中内容修改如下

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit({
        type: 'add',
        amount: 8
      })
    }
  }
}
</script>

使用常量替代 Mutation 事件类型

使用常量替代mutation事件类型在各种Flux实现中是很常见的模式。这样可以使 linter之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个项目包含的mutation一目了然。这在在需要多人协作的大型项目中，这会很有帮助。

我们在store中新建mutation-types.js文件，文件内容如下

export const SOME_MUTATION = 'SOME_MUTATION'

在mutation.js文件内容如下

import { ADD } from './mutation-types'
const mutations = {
  addNum (state) {
    state.num++
  },
  [ADD] (state) {
    state.count++
  }
}

export default mutations

在组件中内容和之前一致

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="addCount">+ADD</button>
  </div>
</template>

<script>
import store from '@/store/store'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    addCount () {
      store.commit('add')
    }
  }
}
</script>

在组件中使用this.$store全局属性来触发mutation函数

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    add () {
      this.$store.commit('add')
    }
  }
}
</script>

在组件中使用mapMutations辅助函数

<template>
  <div class="mutation">
    <p>{{ count }}</p>
    <button @click="add">+ADD</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods: {
    ...mapMutations(['add'])
  }
}
</script>

Mutation一条重要的原则就是要记住 mutation 必须是同步函数