Global Event Bus vs Vuex
I’m new to Vue and Quasar, and I’m taking a Udemy course on the subject.
Today the instructor introduced us to the Global Event Bus.
The Global Event Bus page in the documentation makes an interesting comment, but I have not been able to find any further discussion about it. It says, “Consider using Vuex instead of an event bus.”
When should I use Vuex, and when should I opt instead for the Global Event Bus? And why does the better option matter?
Don’t they serve different purposes? Vuex is for storing state, while a global event bus is for raising events.
The chances are you will need Vuex to share application data and state and at the same time it is far less likely you need a Global Event Bus. The data in vuex is reactive. Most of the time you have to act on data changes and not events.
If you are writing components, and subcomponents like a table, table row, table column, table header … you should use $emit and listen to the events in the parent components. If you look at the quasar ui source code you will find lots of examples for this.
And I don’t think there is a Global Event Bus in Quasar source code but I could be wrong.
However where I find it’s a bit tedious is when you have Parent>Child>SubChild>SubSubChild components events do not bubble up like native events. So if you $emit(‘someevent’) on SubSubChild and you want to listen to it in Parent then you have to pass it up in SubChild and Child.
I ended up using this gist here for this:
s.molinari last edited by
Quasar docs on the event bus. https://quasar.dev/options/global-event-bus#Introduction