上一篇：（三十九）Vue之集中式的状态管理机制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']),}