web-dev-qa-db-ja.com

スプレッド構文（...）はmapGettersでどのように機能しますか？

VuexのmapGetterヘルパーで計算されたゲッターを使用する場合は、次のように使用します。

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

関数の引数として使用される配列を展開するために以前に使用された拡散演算子を見ましたが、ここでmapGettersの例で見られるようなメソッドの前ではありません。

たとえば、mozillaのドキュメントを見ると、この構文の例も実際には見つかりません。

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

何もありません。この構文とこのケースはどのように正確に機能し、おそらく誰かがこれに関するドキュメントを提供できますか？

javascriptecmascript-6vue.jsvuexspread-syntax
14
Stephan-v

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}をいくらか返し、同じ名前の個々の計算されたプロパティに分離します。

これらのURLも参照できます。

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

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

18
fullmetal

私は、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

3
kmc059000

オブジェクトプロパティを別のオブジェクトにマージするために使用されます。ドキュメントに記載されています。 https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

下 Spread in object literals セクション。

1
Val Cajes Luminarias