web-dev-qa-db-fra.com

Comment fonctionne exactement la syntaxe mapGetters?

Chaque fois que vous voulez utiliser un getter calculé avec l’assistant mapGetter de Vuex, vous l’utiliserez comme ceci:

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

J'ai vu l'opérateur de propagation utilisé auparavant pour développer des tableaux à utiliser comme arguments de fonction, mais pas devant une méthode comme celle que nous voyons ici avec l'exemple mapGetters. 

Je ne trouve pas vraiment d'exemples de cette syntaxe non plus, lorsque l'on consulte par exemple la documentation de mozilla:

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

Il n'y a rien Comment cette syntaxe fonctionne-t-elle exactement dans ce cas et quelqu'un pourrait-il fournir une documentation à ce sujet peut-être?

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

mapGetters et mapActions sont essentiellement des utilitaires fournis par Vuex qui renvoie des méthodes de tableau avec une définition définie. Ce tableau, lorsqu'il est combiné avec ... (opérateur d'étalement d'objet), l'étend dans des fonctions individuelles dans l'objet calculé ou méthodes, respectivement.

Par exemple:-

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

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

Les deux éléments ci-dessus sont identiques, si bien qu'il renvoie en quelque sorte un tableau de définitions [getter1 (), getter2 (), getter3 ()] et les sépare en propriétés calculées individuelles portant le même nom.

Vous pouvez également vous référer à ces URL: -

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

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

10
fullmetal

J'essaie de clarifier la réponse de Val avec des détails qui, à mon avis, ont été omis. Dans votre exemple, l'opérateur spread n'est pas utilisé "devant une méthode". Ce qui se passe réellement est qu’il est appliqué au résultat de mapGetters

Vous pouvez penser comme ça:

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

Vous pouvez lire la documentation fournie par Val Cajes Luminarias pour plus de détails sur le fonctionnement de l'opérateur spread avec les littéraux d'objet. https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

2
kmc059000

Il est utilisé pour fusionner les propriétés d'un objet avec un autre objet. C'est indiqué dans la documentation . https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Operators/Spread_operator

Sous la section Spread in object literals.

0
Val Cajes Luminarias