我在我的组件中使用vuex
和mapGetters
帮助器。我有这个功能:
getProductGroup(productIndex) {
return this.$store.getters['products/findProductGroup'](productIndex)
}
是否有可能以某种方式将其移至mapGetters
?问题是我也将一个参数传递给函数,所以我找不到一种方法将它放在mapGetters
答案 0 :(得分:23)
如果你的getter接受了这样的参数:
getters: {
foo(state) {
return (bar) => {
return bar;
}
}
}
然后你可以直接映射吸气剂:
computed: {
...mapGetters(['foo'])
}
然后将参数传递给this.foo
:
mounted() {
console.log(this.foo('hello')); // logs "hello"
}
答案 1 :(得分:0)
对不起,我和@Golinmarq在一起。
对于那些寻求解决方案而无需在模板中执行计算出的属性的人来说,您将无法立即使用它。
https://github.com/vuejs/vuex/blob/dev/src/helpers.js#L64
这是我用来带附加参数的mappedGetters
的一些摘要。假定您的getter返回了一个带有附加参数的函数,但是您可以很容易地对其进行改进,以便getter同时获取状态和附加参数。
import Vue from "vue";
import Vuex, { mapGetters } from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
myModule: {
state: {
items: [],
},
actions: {
getItem: state => index => state.items[index]
}
},
}
});
const curryMapGetters = args => (namespace, getters) =>
Object.entries(mapGetters(namespace, getters)).reduce(
(acc, [getter, fn]) => ({
...acc,
[getter]: state =>
fn.call(state)(...(Array.isArray(args) ? args : [args]))
}),
{}
);
export default {
store,
name: 'example',
computed: {
...curryMapGetters(0)('myModule', ["getItem"])
}
};
要旨在这里https://gist.github.com/stwilz/8bcba580cc5b927d7993cddb5dfb4cb1