web-dev-qa-db-fra.com

Accès vue getter d'espaces de noms vuex à partir du modèle

J'ai fait un mappage getter à espace de noms vuex dans mon .vue composant comme celui-ci:

...mapGetters([
  'fooModule/barGetter'
])

maintenant comment accéder à ce getter dans le modèle de composant .vue que j'ai essayé {{fooModule.barGetter}} mais cela ne semble pas fonctionner, {{fooModule/barGetter}} est évidemment faux.

Je pourrais attribuer une autre clé au getter dans mapGetters en

...mapGetters({
    fooBarGetter: 'fooModule/barGetter'
})

Cela me permet d'accéder à la valeur dans le modèle en utilisant {{forBarGetter}}

Cependant, je me demande s'il existe un moyen d'accéder au 'fooModule/barGetter' sans lui affecter une autre clé. C'est possible? si c'est le cas, comment?

vue.jsvuejs2vuex
13
Mohamed Hussain

Le premier paramètre de mapGetters peut être un espace de noms:

computed: {
    ...mapGetters("fooModule", [
        "barGetter"
    ]),
    ...mapGetters("anotherModule", [
        "someGetter"
    ])
}

Cela rendra la valeur disponible sous la forme this.barGetter ou simplement barGetter dans les modèles. Notez qu'il est parfaitement acceptable d'avoir plusieurs instructions mapGetters.

documentation Vuex Getters

35
matpie

Eh bien, en fait, il est enregistré sous la clé 'fooModule/barGetter', qui n'est pas un nom valide pour une variable javascript. Vous devez donc accéder à la clé sous forme de chaîne, ah, et donc, ce n'est pas si élégant. Mais vous pouvez toujours le faire, accédez-y dans le modèle avec {{ _self['fooModule/barGetter'] }}.

Voir cet exemple de travail:

new Vue({
  el: '#app',
  store: new Vuex.Store({
    modules: {
      fooModule: {
        namespaced: true,
        state: {},
        getters: {
          barGetter() {
            return 'Hi :)';
          }
        }
      }
    }
  }),
  computed: Vuex.mapGetters([
    'fooModule/barGetter'
  ])
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  {{ _self['fooModule/barGetter'] }}
</div>
1
Cobaltway

Pour tous ceux qui souhaitent y parvenir sans spécifier l'espace de noms comme premier paramètre, il y a aussi une possibilité de passer object/map à mapGetters avec noms déjà espacés du getter s.

...mapGetters({
    'activeItems': ACTIVE_ITEMS_GETTER_WITH_NAMESPACE
})

Ceci est extrêmement utile lorsque vous avez des constantes avec des noms d'espaces de noms de mutations, de getters et d'actions. Dans notre cas, nous avons beaucoup de modules et il faut parfois du temps pour rechercher le module dans lequel se trouve notre getter, mutation ou action. C'est pourquoi nous ajoutons un espace de noms à nos constantes.

1
Dawid Zbiński