mapGetters语法究竟如何工作？

Question

每当你想使用来自Vuex的mapGetter助手的计算getter时,你会像这样使用它:

...mapGetters([
    'getter1', 
    'getter2', 
    'etc'
])

我已经看到之前使用的扩展运算符扩展数组以用作函数参数,但不是在我们在这里看到的mapGetters示例方法之前.

在查看mozilla文档时,我无法找到这种语法的示例:

https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

什么都没有.这种语法究竟是如何起作用的？这种情况可能会有人提供一些关于此的文档吗？

Answer 1

mapGetters和mapActions基本上是vuex提供的一个帮助器,它返回一个带有一些定义定义的数组方法.当与...(对象扩展运算符)组合时,该数组分别将其展开到计算对象或方法对象中的各个函数中.

例如:-

{
    computed: {
        ...mapGetters([
            'getter1',
            'getter2',
            'getter3'
        ]);
    }
}

{
    computed: {
        getter1() {
            return this.$store.getters.getter1;
        },
        getter2() {
            return this.$store.getters.getter2;
        },
        getter3() {
            return this.$store.getters.getter3;
        },
    }
}

以上两者都是相同的,所以基本上它稍微返回一个[getter1(),getter2(),getter3()]定义的数组,并分成具有相同名称的单个计算属性.

你也可以参考这些网址: -

https://www.youtube.com/watch?v=SaBnaGu7cP8&list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2&index=8

https://vuex.vuejs.org/en/getters.html

Answer 2

我试图用我觉得被省略的细节来澄清 Val 的回应。在您的示例中，“在方法之前”没有使用扩展运算符。实际发生的是它被应用于结果mapGetters

你可以这样想：

{
    ...{
        getter1: /* a mapped fn from vuex store */,
        getter2: /* a mapped fn from vuex store */,
    }
}

您可以阅读 Val Cajes Luminarias 提供的文档，了解有关扩展运算符如何处理对象文字的更多详细信息。https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator