（四十）vuex之四个map辅助函数

上一篇：（三十九）Vue之集中式的状态管理机制Vuex
下一篇：（四十一）Vuex之模块化与命名空间

概述

Vuex辅助函数是一组用于简化在Vue.js应用程序中使用Vuex状态管理库的函数。这些辅助函数可以帮助我们在组件中更轻松地访问和操作Vuex存储中的状态。

下面是一些常用的Vuex辅助函数：

• mapState：将Vuexstore中的状态映射为组件的计算属性。它接收一个数组或对象作为参数，用于指定要映射的状态。使用这个函数可以在组件中直接访问Vuex store中的状态，而无需手动编写getter函数。
• mapGetters：将Vuex store中的getter映射为组件的计算属性。它接收一个数组或对象作为参数，用于指定要映射的getter。使用这个函数可以在组件中直接访问Vuex store中定义的getter，而无需手动调用getter函数。
• mapMutations：将Vuex store中的mutation映射为组件的方法。它接收一个数组或对象作为参数，用于指定要映射的mutation。使用这个函数可以在组件中直接调用Vuex store中定义的mutation，而无需手动提交mutation。
• mapActions：将Vuex store中的action映射为组件的方法。它接收一个数组或对象作为参数，用于指定要映射的action。使用这个函数可以在组件中直接调用Vuex store中定义的action，而无需手动分发action。

使用这些辅助函数，我们可以简化对Vuex store中状态、getter、mutation和action的访问和操作。它们提供了一种更简洁、更直观的方式来处理Vuex状态管理。

使用方式

一般有以下两种写法：

• 数组写法：数组写法一种简洁的方式，用于指定要映射的状态。在数组中，我们列出需要映射的函数或属性的名称
• 对象写法：对象写法允许我们为映射的函数或属性提供更多的配置选项。我们可以使用对象的键值对来指定要映射的函数或属性的名称，并提供其他选项如命名空间、别名等。

mapState

mapState方法用于帮助我们映射state中的数据为计算属性

使用方式：

  computed: {
      //借助mapState生成计算属性（对象写法）
      ...mapState({computed1:'state1',computed2:'state2',computed3:'state3'}),
           
      //借助mapState生成计算属性（数组写法）
      ...mapState(['state1','state2','state3']),
  },

mapGetters

mapGetters方法用于帮助我们映射getters中的数据为计算属性

使用方式：

computed: {
       //借助mapGetters生成计算属性（对象写法）
       ...mapGetters({computed1:'getters1'}),
   
       //借助mapGetters生成计算属性（数组写法）
       ...mapGetters(['getters1'])
   },

mapActions

mapActions方法用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

使用方式：

   methods:{
       //靠mapActions生成（对象形式）
       ...mapActions({methods1:'actions1',methods2:'actions2'})
   
       //靠mapActions生成（数组形式）
       ...mapActions(['actions1','actions2'])
   }

mapMutations

mapMutations方法用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   methods:{
       //靠mapActions生成（对象形式）
       ...mapMutations({methods1:'mutations1',methods2:'mutations2'}),
       
       //靠mapMutations生成（对象形式）
       ...mapMutations(['mutations1','mutations2']),
   }