How should I handle events in Vuex?

Question

I am used to using a global event bus to handle cross-component methods. For example:

var bus = new Vue();
...
//Component A
bus.$emit(\'DoSomethingInComponentB\         


        

Answer 1

Using a global event bus is an anti pattern because it becomes very difficult to trace it (where was this event fired from? Where else are we listening to it? etc.)

Why do you want to use a global event bus? Is there some method that you want to trigger in another component? If you use Vuex then all your actions (methods) are in one central state and you can just dispatch your action.

So for example instead of doing this..

// Component A
bus.$emit('DoSomethingInComponentB');

// Component B
bus.$on('DoSomethingInComponentB', function(){ this.doSomething() })

With Vuex you would have the doSomething() function in a central store as an action. Then just make sure to convert you local component data to a global Vuex state data and dispatch that action.

this.$store.dispatch('doSomething')