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.
From the docs:
https://vuejs.org/v2/style-guide/#Non-flux-state-management-use-with-cautionIf 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.
https://github.com/quasarframework/quasar/tree/dev/ui/src/components/tableAnd 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:
https://gist.github.com/loilo/597fa84f4d7e6b7552373f2df9517b45
-
Quasar docs on the event bus. https://quasar.dev/options/global-event-bus#Introduction
And on Vuex: https://quasar.dev/quasar-cli/cli-documentation/vuex-store
Scott
