手动实现vuex中mapGetters

vuex中mapGetters

在我们读取vuex的数据的时候通常是这么读取的

	console.log(this.$store.state.book.test)

如果这样反复使用会发现有很大的代码冗余量

因此,vue也提供了mapGetters这种好用的方法

首先在store目录下新建一个getters文件夹
在这里插入图片描述
然后在其内部将需要反复读取的数据组合成一个对象,并暴露出去
在这里插入图片描述
同时还要在store下的index文件中配置引入和使用
在这里插入图片描述
然后在需要获取数据的vue文件中引入vue中的mapGetters方法
在这里插入图片描述
其次就是将mapGetters方法传入一个数组进行执行,并将他混入在计算属性之中

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex 使用 `mapGetters` 传递参数有两种方法: 方法一:使用辅助函数 你可以使用辅助函数 `createNamespacedHelpers` 创建带有命名空间的辅助函数,并将它们与 `mapGetters` 一起使用。这样,你可以在组件通过传递参数来访问特定的 getter。 首先,导入 `createNamespacedHelpers` 辅助函数: ```javascript import { createNamespacedHelpers } from 'vuex'; ``` 然后,在组件创建命名空间的辅助函数: ```javascript const { mapGetters } = createNamespacedHelpers('yourNamespace'); ``` 接下来,使用 `mapGetters` 辅助函数来映射 getter 到组件的计算属性,并传递参数: ```javascript computed: { ...mapGetters(['yourGetter']), computedGetter() { return this.yourGetter('yourParameter'); } } ``` 方法二:手动映射 如果你不想使用辅助函数,你可以手动映射 getter 到组件的计算属性,并在方法传递参数。 首先,在组件导入 Vuex 的 `mapGetters`: ```javascript import { mapGetters } from 'vuex'; ``` 然后,将 getter 映射到组件的计算属性,并在方法传递参数: ```javascript computed: { ...mapGetters({ yourGetter: 'yourNamespace/yourGetter' }), computedGetter() { return this.yourGetter('yourParameter'); } } ``` 在上述示例,`yourNamespace` 是你的命名空间名称,`yourGetter` 是你的 getter 名称,`yourParameter` 是你要传递给 getter 的参数。 这样,你就可以在组件使用带参数的 `mapGetters` 了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值