Vuex 源码分析（六）

在 Vue 组件中，除了可以通过 this.$store 进行对应 state、getters 的获取，通过 commit 触发 mutations，通过 dispatch 触发 actions 外，还暴露了几个辅助函数，帮助我们更好的操作 Vuex 中的数据。

在调用的时候，我们可以通过往 mapState()、mapGetters()、mapMutations() 和 mapActions() 函数中传入对应组件中需要用到的 state、getters、mutations 和 actions，就可以很方便的将它们映射到组件中，从而简化组件的代码。

mapState

mapState() 函数可以将 Vuex 中的 state 映射到组件的计算属性中。例如，如果我们需要在组件中使用 user state，可以使用以下代码将其映射到组件的计算属性 userState 中：

computed: {
  ...mapState({
    userState: state => state.user
  })
}

然后，我们就可以在组件中使用 this.userState 来访问 user state。

mapGetters

mapGetters() 函数可以将 Vuex 中的 getters 映射到组件的计算属性中。例如，如果我们需要在组件中使用 userFullName getter，可以使用以下代码将其映射到组件的计算属性 userFullNameGetter 中：

computed: {
  ...mapGetters({
    userFullNameGetter: 'user/fullName'
  })
}

然后，我们就可以在组件中使用 this.userFullNameGetter 来访问 userFullName getter。

mapMutations

mapMutations() 函数可以将 Vuex 中的 mutations 映射到组件的方法中。例如，如果我们需要在组件中使用 updateUser mutation，可以使用以下代码将其映射到组件的方法 updateUserMutation 中：

methods: {
  ...mapMutations({
    updateUserMutation: 'user/updateUser'
  })
}

然后，我们就可以在组件中使用 this.updateUserMutation() 来调用 updateUser mutation。

mapActions

mapActions() 函数可以将 Vuex 中的 actions 映射到组件的方法中。例如，如果我们需要在组件中使用 fetchUser action，可以使用以下代码将其映射到组件的方法 fetchUserAction 中：

methods: {
  ...mapActions({
    fetchUserAction: 'user/fetchUser'
  })
}

然后，我们就可以在组件中使用 this.fetchUserAction() 来调用 fetchUser action。

结语

通过使用 mapState()、mapGetters()、mapMutations() 和 mapActions() 函数，我们可以很方便的将 Vuex 中的数据和方法映射到组件中，从而简化组件的代码。这使我们的代码更加简洁易读，并有助于我们更好地管理 Vuex 中的数据。