Vuex③(getters，四种map映射方法)

Vuex③(getters，四种map映射方法)

文章目录

​​getters配置项​​​​mapState与mapGetters​​​​mapActions与mapMutations​​​​四种map映射方法的总结​​

getters配置项

当state中的数据需要经过加工后再使用时，可以使用getters加工。

它与计算属性computed有些类似，但是它与计算属性的不同点在于，其可以在任意组件中复用，而计算属性只在当前组件中生效。

那么它如何使用呢，我们举一个例子，在求和案例的基础上，将和放大十倍展示：

步骤一：我们先在store中添加getter配置项

......const getters = { bigSum(state){ return state.sum * 10 }}//创建并暴露storeexport default new Vuex.Store({ ...... getters})

这里于计算属性的写法一样，不过我们的方法中会传入一个参数state。

步骤二：组件中读取数据

我们可以在store的getters中找到他：

于是我们的代码可以这么写：

在开发者工具中我们可以查看getters：

mapState与mapGetters

我们在完成求和案例的时候会发现，我们要呈现一个数据的时候前面要加一些重复繁冗的前缀，如果要呈现的数据变得很多，那么就会变得非常的麻烦，例如：

我们有一种解决办法就是使用计算属性computed：

我们观察这些计算属性可以发现一些规律，于是我们可以借助Vuex中为我们生成代码的函数，只需传入几个简单的参数就可以达到同样的效果，这个方法就是​​mapState​​

首先我们要引入它：

import {mapState} from 'vuex'

其次这个方法可以传入一个对象：

对象的键记录计算属性的名对象的值记录其在state中对应的名字

mapState({sum:'sum',school:'school',student:'student'})

我们可以把它打印出来看看：

他是对象，其中的每一个函数等价于刚才的计算属性

所以我们可以利用ES6的语法，把这个对象解构放入到计算属性中：

computed:{ //靠程序员自己亲自去写计算属性 // sum(){ // return this.$store.state.sum // }, // school(){ // return this.$store.state.school // }, // student(){ // return this.$store.state.student // }, ...mapState({sum:'sum',school:'school',student:'student'}), bigSum(){ return this.$store.getters.bigSum }, },

结果：

​​mapState​​这个方法还有另一种写法，他可以传入一个数组。如果你在使用第一种方法的时候发现键和值一模一样就可以使用这种写法:

...mapState(['sum','school','student'])

接下来我们解决getters的问题，它也有一个对应的函数​​mapGetters​​

这个函数的使用方法与​​mapState​​一模一样

mapActions与mapMutations

接下来我们来优化methods中的代码：

methods: { increment(){ this.$store.commit('JIA',this.n) }, decrement(){ this.$store.commit('JIAN',this.n) }, incrementOdd(){ this.$store.dispatch('jiaOdd',this.n) }, incrementWait(){ this.$store.dispatch('jiaWait',this.n) }, },

首先我们可以看到上面两个方法，都是用了commit，而commit是用来与mutations对话的(Vuex原理图)，所以在这里我们使用​​mapMutations​​方法来生成代码

与前面不同的是：

上面是原方法，而下面是我们使用​​mapMutations​​​方法生成的，由此我们知道这个​​this.n​​​我们要在调用的时候传进去，而不是通过​​mapMutations​​来传。其他的使用与前文所提到的mapState与mapGetters一样。

代码如下：

然后下面的两个方法(使用了dispatch，与Actions对话)我们使用mapActions方法进行生成

完整优化代码如下：

四种map映射方法的总结

四个map方法的使用

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

computed: { //借助mapState生成计算属性：sum、school、subject（对象写法） ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性：sum、school、subject（数组写法） ...mapState(['sum','school','subject']),},

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

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

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

methods:{ //靠mapActions生成：incrementOdd、incrementWait（对象形式） ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠mapActions生成：incrementOdd、incrementWait（数组形式） ...mapActions(['jiaOdd','jiaWait'])}

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

methods:{ //靠mapActions生成：increment、decrement（对象形式） ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成：JIA、JIAN（对象形式） ...mapMutations(['JIA','JIAN']),}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。