vuex mapGetters 如何传参
时间: 2023-07-17 09:12:27 浏览: 177
详解vuex中mutation/action的传参方式
在 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` 了。
阅读全文