透过Vuex代码分析，让你成为Vuex大神（下）

Vuex 辅助函数

Vuex 除了提供我们 Store 对象外，还对外提供了一系列的辅助函数，方便我们在代码中使用 Vuex，提供了操作 store 的各种属性的一系列语法糖，下面我们一起来看看这些辅助函数有哪些，分别是怎么用的。

mapState

mapState 函数可以将 store 中的状态映射到组件的计算属性中，这样我们就可以在组件中直接使用这些状态，而不用每次都通过 this.$store.state 去获取。

例如，我们有一个组件叫 Counter，它有一个 count 状态，我们需要在组件中显示这个 count 状态，那么我们可以使用 mapState 函数来实现：

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  }
}

这样，我们就可以在组件中直接使用 this.count 来获取 store 中的 count 状态了。

mapGetters

mapGetters 函数可以将 store 中的 getter 映射到组件的计算属性中，这样我们就可以在组件中直接使用这些 getter，而不用每次都通过 this.$store.getters 去获取。

例如，我们有一个组件叫 Counter，它有一个 doubleCount getter，我们需要在组件中显示这个 doubleCount getter，那么我们可以使用 mapGetters 函数来实现：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['doubleCount'])
  }
}

这样，我们就可以在组件中直接使用 this.doubleCount 来获取 store 中的 doubleCount getter 了。

mapActions

mapActions 函数可以将 store 中的 action 映射到组件的方法中，这样我们就可以在组件中直接调用这些 action，而不用每次都通过 this.$store.dispatch 去调用。

例如，我们有一个组件叫 Counter，它有一个 increment action，我们需要在组件中调用这个 increment action，那么我们可以使用 mapActions 函数来实现：

import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['increment'])
  }
}

这样，我们就可以在组件中直接使用 this.increment() 来调用 store 中的 increment action 了。

mapMutations

mapMutations 函数可以将 store 中的 mutation 映射到组件的方法中，这样我们就可以在组件中直接调用这些 mutation，而不用每次都通过 this.$store.commit 去调用。

例如，我们有一个组件叫 Counter，它有一个 increment mutation，我们需要在组件中调用这个 increment mutation，那么我们可以使用 mapMutations 函数来实现：

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['increment'])
  }
}

这样，我们就可以在组件中直接使用 this.increment() 来调用 store 中的 increment mutation 了。

总结

Vuex 提供了一系列的辅助函数，方便我们在代码中使用 Vuex，这些辅助函数可以帮助我们轻松操作 store 的各种属性。通过使用这些辅助函数，我们可以更轻松地管理组件的状态，从而使我们的代码更易于维护。