VueX mapState、mapGetters、mapActions和mapMutaions 的使用

一、mapState和mapGetters

如果我们想要读取VueX中的State数据的Getters数据时，需要使用$store.state.数据名 和 $store.getters.数据名。

当我们State和getters中的数据多了以后，书写会很麻烦：

如果我们想要使用方便可以配置计算属性来简化书写：

但是这样配置计算属性过于繁琐，为了便于书写，VueX为我们提供了mapState和mapGetters来方便我们书写。

（一）引入mapState和mapGetters

import { mapState, mapGetters } from 'vuex';

（二）配置mapState和mapGetters

我们配置mapState和mapGetters是在计算属性中配置。

1. 数组写法

因为mapState和mapGetters返回的是一个对象，所以我们需要使用...扩展运算符进行处理。

computed : {

        ...mapState([ "数据1", "数据2"... ]),

        ...mapGetters(["数据1", "数据2"...])

}

注意：这里的数据名称是state中的数据名称，创建出来的计算属性名称与其同名 

2. 对象写法

使用对象写法，在模板中的数据使用新数据

computed:{

        ...mapState({

                新数据1 : "数据1",

                新数据2 : "数据2"

        }),

        ...mapGetters({

                新数据1 : "数据1",

                新数据2 : "数据2"

        })

}

 

 

二、 mapActions和mapMutaions

我们调用Actions和Mutations中的方法，要一直调用this.$store.dispatch 和 this.$store.commit ，写法有些繁琐。

VueX为我们提供了mapActions和mapMutaions，能够对这些方法的调用进行简写。

（一）引入mapActions和mapMutaions

import { mapActions, mapMutaions } from 'vuex';

（二）配置mapActions和mapMutaions

1. 数组写法

methods : {

        ...mapActions([ "方法1", "方法2"... ]),

        ...mapMutations(["方法1", "方法2"...])

}

 

2. 对象写法

methods : {

        ...mapActions({

                新方法1 : "方法1",

                新方法2 : "方法2"

        }),

        ...mapMutations({

                新方法1 : "方法1",

                新方法2 : "方法2"

        })

}

3. 传参

传参直接在事件回调函数那里调用就行