vue.js辅助函数-mapMutations

在Vue.js中，使用辅助函数可以更方便地使用Vuex的mutation。而mapMutations就是Vuex提供的一个辅助函数，它可以将mutation映射到组件的methods中，使得我们可以在组件中直接调用mutation，而不需要手动进行commit。

mapMutations函数接收一个字符串数组或对象作为参数，数组中的字符串即为mutation的名称，对象中的键值对是映射的关系。函数会返回一个对象，对象中的属性就是映射的mutation，对应值为一个函数。

下面是一个具体的代码实例：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

export default store

// App.vue
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

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

在上面的例子中，我们在组件中使用mapMutations(['increment'])将incrementmutation映射到methods中。这样，在组件的methods中就可以直接调用increment方法来提交mutation，而无需使用store.commit('increment')。在模板中，我们使用@click监听了按钮的点击事件，点击按钮后调用了increment方法，从而触发了mutation。

需要注意的是，在methods中使用mapMutations时要使用对象展开运算符...，这样才能正确地将映射的mutation绑定到组件的方法中。

使用mapMutations可以简化我们对mutation的调用，提高代码的可读性和编写效率。同时，它还可以避免手动提交mutation时的拼写错误和代码冗余。

vue.js辅助函数-mapMutations

悦读