Menu
I am trying to understand the principle of communication between components and a doubt has arisen: what is the main difference between Vue event bus strategy and Vuex to deal with components communication? Besides that, when is the best time of use of each one and what is the best practice to use both in the same project?
402
If you are new to front-end development, you surely have heard about VueJS. It is a progressive JavaScript framework that lets you create exciting web applications! On the other hand, Vuex is a state management tool that enables you to develop your application.
Both of these could do the work of Vuex, but they aren't enough to replace Vuex completely. Let's take a look at why Vuex is is still necessary, even in Vue 3. First, Vuex offers advanced debugging capabilities that Vue 3 features does not.
An Event Bus is nothing but a global Vue instance that is imported by the components involved in communication and passing data. It makes use of the $on, $emit, and $off properties of the Vue object to emit out events and pass on data.
People often say “as your app grows, you'll need Vuex”. Actually, it depends on the way it grows. Your app may grow but your data flow stays nuclear (i.e parent-child and close siblings). Eventually, you can use to props and events to share this data without having to add Vuex and the boilerplate that comes wtihit.
Mapping in Vuex enables you to bind any of the state's properties, like getters, mutations, actions, or state, to a computed property in a component and use data directly from the state. Although we can get the job done with this. $store.state.user.data.name , we can use a map helper to simplify it to this.
the vue event bus is a separate instance of Vue. Vuex is a (flux based) state managment library that integrates with the current instance of Vue, and adds a lot of functionality.
I think you shouldn't be using the event bus at all if you can solve an issue using Vuex.
Vuex implements the flux pattern that allows components to easily subscribe to changes based on store mutations.
img src: https://medium.com/@cabot_solutions/flux-the-react-js-application-architecture-a-comprehensive-study-fd2585d06483
179
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
