web-dev-qa-db-fra.com

Comment dois-je gérer les événements dans Vuex?

J'ai l'habitude d'utiliser un bus d'événements global pour gérer les méthodes inter-composants. Par exemple:

var bus = new Vue();
...
//Component A
bus.$emit('DoSomethingInComponentB');
...
//Component B
bus.$on('DoSomethingInComponentB', function(){ this.doSomething() })

Cependant, je construis un projet plus vaste, qui nécessite une gestion globale de l'État. Naturellement, je veux utiliser Vuex.

Bien que ce modèle de bus fonctionne avec Vuex, il semble incorrect. J'ai vu Vuex recommandé comme remplacement pour ce modèle.

Existe-t-il un moyen d'exécuter des méthodes dans les composants de Vuex? Comment dois-je aborder cela?

23
Blue_Dragon360

Vuex et bus d'événements sont deux choses différentes dans le sens où vuex gère l'état central de votre application tandis que le bus d'événements est utilisé pour communiquer entre les différents composants de votre application.

Vous pouvez exécuter une mutation ou des actions vuex à partir d'un composant et également déclencher des événements à partir des actions de vuex.

Comme le dit docs :

Les actions sont similaires aux mutations, la différence étant que:

  • Au lieu de muter l'état, les actions commettent des mutations.
  • Les actions peuvent contenir des opérations asynchrones arbitraires.

Vous pouvez donc déclencher un événement via le bus à partir d'actions et vous pouvez appeler une action à partir de n'importe quelle méthode de composant.

22
Saurabh