Existe-t-il un moyen de répartir les actions entre deux modules vuex avec espace de nom?

159

Est-il possible de distribuer une action entre des modules d'espacement de noms?

Par exemple, j'ai des modules vuex "gameboard" et "notification". Chacun est espacé. Je souhaite envoyer une action du plateau de jeu vers le module de notification.

Je pensais que je pourrais utiliser le nom du module dans le nom de l'action d'expédition comme ceci:

// store/modules/gameboard.js
const actions = {
    myaction ({dispatch}) {
        ...
        dispatch('notification/triggerSelfDismissingNotifcation', {...})
    }
}

// store/modules/notification.js
const actions = {
    triggerSelfDismissingNotification (context, payload) {
        ...
    }
}

Mais quand j'essaye de faire cela, j'obtiens des erreurs qui me font penser que vuex essaie de distribuer une action dans mon module de plateau de jeu:

[vuex] type d'action locale inconnu: notification / triggerSelfDismissingNotification, type global: gameboard / notification / triggerSelfDismissingNotification

Existe-t-il un moyen de distribuer du module vuex au module ou dois-je créer une sorte de pont dans l'instance racine vuex?

vue.js vuejs2 vuex

— Chris Schmitz
source

Réponses:

344

Il vous suffit de spécifier que vous distribuez depuis le contexte racine:

// from the gameboard.js vuex module
dispatch('notification/triggerSelfDismissingNotifcation', {...}, {root:true})

Désormais, lorsque la distribution atteint la racine, elle aura le chemin de l'espace de noms correct vers le module de notifications (par rapport à l'instance racine).

Cela suppose que vous définissez namespaced: truevotre module de magasin vuex.

— Jake
source

C'est le seul succès sur Internet pour ma recherche d'une solution. Merci de répondre.

— Peter Roehlen

Pour être honnête, il est documenté ici vuex.vuejs.org/en/modules.html à "Accès aux actifs globaux dans les modules d' espacement de noms". Bien que ce soit un peu difficile à comprendre.

— Jake

J'adore la vue, mais il me semble que vuex ajoute plus de niveaux de difficulté plutôt que de la simplifier. Maintenant, je sais que ce n'est pas le but de vuex mais quand même, n'est-ce pas ennuyeux que je doive toujours être conscient de certaines conventions comme dans cet exemple notification/trigger, alors si je veux que ce soit un peu plus générique, je le fais ${NOTIF_TYPE_NAME}/${NOTIF_TRIGGER_ACTION}, quand même J'ai besoin de la barre oblique, ou même de créer une fonction d'assistance pour cela, j'ai le sentiment que lorsque je veux que mon application soit plus modulaire, je paie beaucoup plus que ce que je reçois. Ceci est mon avis

— Dima Gimburg

Vous pouvez utiliser this.dispatch. Il n'en a pas besoin {root: true}. C'est global.

— MKatleast3

Non, vous devez utiliser {root: true}. Le cas que vous vouliez dire est probablement l'envoi à un module enfant, qui en effet (et évidemment) n'a pas besoin de cet indicateur.

— kursus

Comme mentionné @ MKatleast3

Vous pouvez utiliser this.dispatch. Il n'a pas besoin {root: true}d'options d'expédition. C'est global.

— Slowaways
source