【Vue】vuex mapState和mapGetters

本文介绍了如何使用Vuex的mapState和mapGetters方法来简化Vue应用中计算属性的定义。通过这两个方法,可以将state和getter中的数据便捷地映射到计算属性,减少重复代码,提高代码的可读性和维护性。示例中展示了对象写法和数组写法的使用,并强调了简写规则和注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、mapState方法:用于帮助映射state中的数据为计算属性

computed: {
  	// 借助mapState生成计算属性:sum、school、subject(对象写法一)
  	...mapState({sum:'sum',school:'school',subject:'subject'}),

  	// 借助mapState生成计算属性:sum、school、subject(数组写法二)
  	...mapState(['sum','school','subject']),
},

2、mapGetters方法:用于帮助映射getters中的数据为计算属性

computed: {
    //借助mapGetters生成计算属性:bigSum(对象写法一)
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性:bigSum(数组写法二)
    ...mapGetters(['bigSum'])
},

示例:

通过计算属性可以简化模板上写的内容

防止插值语法写的过长

这边我们发现其实用计算属性直接写也比较麻烦, 红色线都是重复的内容而 vuex 的某个方法可以帮助你简化

通过分析, 可以看出只要把变化的东西交给某个函数即可

这边变化的东西为方法名state 里面的值名

这边要在 vuex 里面引入一个一个 mapState

里面写入对象, 注意写成字符串, 形式 he : 'sum'(其实 he 也是一个字符串, 但是可以省略)

然后我们先调用一个 mapState 看一下是什么

发现是一个对象

然后我们把这个直接写入计算属性发现报错

因为计算属性是一个方法, 在方法里面直接写对象显然是不正确的

用一个 es6 的解决方法

下图...obj2, // 表示把 obj2 的内容展开放入在 obj 里

并且是放在中间的, 与写的位置对应

所以同理

把函数前加入... 在最后加一个逗号就行

但注意的点是

当自己用计算属性写时, 计算属性会在开发者工具中显示出来

当我们不自己去写计算属性, 通过 mapState 去实现时,其实它也是计算属性

发现开发者工具里面把它们分类在了 vue 的绑定上, 其实我们知道这里面的东西都是隶属于 computed 上的

这是对象写法

下面为数组写法

我们先回顾一个简写

这边对象里面的 key 和要找的变量名一致时, 就可以简写为 a

但是如果时一个字符串那就不可以简写了!!!!

所以这边的对象用简写方式行不通, 因为是字符串

所以可以尝试用数组方法写

相当于在计算属性里, 写了一个方法名字为 sum, 而且读取的是 state 里面的 sum

但是要注意的是想用数组写法的话

如下写就是错误的因为 state 里面没有 he xuexiao xueke 等数据名

当对于 getters 时

就再引用一个 mapGetters

同理

mapStatemapGettersVue.js中用于将stategetters映射到组件的计算属性的辅助函数。 mapState函数可以将store中的state映射到组件的计算属性中。它接收一个数组或对象作为参数,数组中的元素可以是state中的属性名,或者是一个包含属性名对应getter的对象。使用mapState后,在组件中就可以直接访问这些计算属性,而不需要在模板中使用this.$store.state来访问。 例如,如果有一个名为count的state属性,可以使用以下方式将其映射到组件的计算属性: ``` import { mapState } from 'vuex' export default { computed: { ...mapState(['count']) } } ``` 这样,在模板中就可以直接使用{{ count }}来访问这个计算属性。 mapGetters函数用于将store中的getters映射到组件的计算属性中。它接收一个数组或对象作为参数,数组中的元素可以是getter函数名,或者是一个包含getter函数名对应的计算属性名的对象。类似地,使用mapGetters后,在组件中就可以直接访问这些计算属性。 例如,如果有一个名为doubleCount的getter函数,可以使用以下方式将其映射到组件的计算属性: ``` import { mapGetters } from 'vuex' export default { computed: { ...mapGetters(['doubleCount']) } } ``` 这样,在模板中就可以直接使用{{ doubleCount }}来访问这个计算属性。 通过使用这两个辅助函数,可以简化组件中访问stategetters的代码,使代码更加清晰易读。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值