How do you and should you move event bus functionality to Vuex store?

Question

Right now I'm using an event bus to call methods of certain Vue components from other non-related Vue components.

I have a functioning Vuex store, so I'm trying to get rid of the event bus and move this functionality to Vuex store.

Questions

Should I move event bus functionality to Vuex store or should I use both?
What's the best way to implement event bus functionality in a Vuex store?
Could you please give an actual example of how to call a method inside another non-related component using Vuex:

First.vue

methods: {
  test1 () {
    console.log('test1 was called')
  }
}

Second.vue

methods: {
  callMethodInsideFirstComponent () {
    ...
  }
}

Brian Lee · Accepted Answer · 2018-08-12 11:59:26Z

3

If you have a need for an event bus, there's no harm in using one. The main problems people have with them are 1) that they pollute the global event space (obviously), 2) if relied upon too heavily can become cumbersome to track, and 3) risk collisions with event names or unintended side effects.

Vuex is a shared reactive state accessible anywhere throughout your application. Key word being reactive, don't think you will be calling methods between components, i.e. component A calls a method defined in component B. Instead, component A will mutate a given property in the state tree which component B is observing (typically in a computed property or watcher).

For example:

// First.vue
<template>
   <div>{{ myStoreProp }}</div>
</template>
...
computed: {
    myStoreProp () {
        return this.$store.getters['myModule/myStoreProp']
    }
}

// Second.vue
<template>
    <button @click="updateMyStoreProp('Hello from Second.vue')">Click Me</button>
</template>
...
methods: {
   updateMyStoreProp (value) {
       this.$store.commit('myModule/myStoreProp', value)
   }
}

Now whenever Second.vue calls it's updateMyStoreProp function, the value committed to the store will reflect in First.vue's template, in this case printing "Hello from Second.vue".

answered Aug 12, 2018 at 11:59

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Un1 Over a year ago

Thanks for the answer, but I need to be able to call methods, not to update a property. Let's say there's a big method in my First.vue, I want to be able to pass the arguments and call it from Second.vue so I don't have to copy that big method to each component, can I do that via Vuex store, or I have to use event bus?

Brian Lee Over a year ago

Yes, you just need to look at it from a different angle. All the data that you pass to the method can be written to the store instead of passed as argument(s). Then you can "trigger" the other components method using a watcher. Once triggered, the method then reads the data out of the store and does it's thing.

Brian Lee Over a year ago

However, this leads up to store actions, which is ideally where you should have this method and you can then dispatch calls to the action from any component that needs it.

Bagaskara · Accepted Answer · 2020-08-27 06:33:12Z

1

You can use event bus to emit and listen event, but you should use vuex when your app become complex. Use vuex API subscribe to implement event bus functionality using vuex. https://vuex.vuejs.org/api/#subscribe

Just simple step, you commit mutation in component A, and use subscribe to listen mutation in component B.

answered Aug 27, 2020 at 6:33

Bagaskara

9018 silver badges17 bronze badges

1 Comment

Un1 Over a year ago

Please provide an example of how to call component's B methods from component A using subscribe

Collectives™ on Stack Overflow

How do you and should you move event bus functionality to Vuex store?

Questions

First.vue

Second.vue

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Questions

First.vue

Second.vue

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related