I've had this question buried in my mental Rolodex for quite some time now. I'm running a very plex Vue application that deals with quite a number of ponents that must municate so for that I use a very structured setup of Vuex utilizing its module system. However, for a particular group of ponents, say a ments folder, i.e:

Comments Directory:

• Comments.vue // overall ments ponent
• Comment.vue // ponent for each ment
• NewComment.vue // ponent to create new ments
• bus.js // reserved event bus for only these three ponents

Is it fine to utilize a reserved Event Bus placed in this directory only for these 3 ponents to municate to one other, or is that deemed as "malpractice" since I already have a large vuex system going ?

I've had this question buried in my mental Rolodex for quite some time now. I'm running a very plex Vue application that deals with quite a number of ponents that must municate so for that I use a very structured setup of Vuex utilizing its module system. However, for a particular group of ponents, say a ments folder, i.e:

Comments Directory:

• Comments.vue // overall ments ponent
• Comment.vue // ponent for each ment
• NewComment.vue // ponent to create new ments
• bus.js // reserved event bus for only these three ponents

Is it fine to utilize a reserved Event Bus placed in this directory only for these 3 ponents to municate to one other, or is that deemed as "malpractice" since I already have a large vuex system going ?

• javascript
• vue.js
• state
• vuex
• event-bus

• vuejs/v2/style-guide/… . But if you know what you are doing, it's really up to you – Jacob Goh Commented Jul 6, 2018 at 6:25
• I just feel as Vuex should be used for app wide munications, not for munications between 2-3 neighboring ponents... Im pretty satisfied with this implementation however, thanks for the link! @JacobGoh – Mike Strong Commented Jul 6, 2018 at 6:33
• @MikeStrong It's fine to use event bus even if you are using Vuex in your application. But, you know, since vuex is designed for municating between all of the ponents available, I don't see the use of event bus that relevant. But it's up to you, btw! – Axel Commented Jul 6, 2018 at 7:17
• My thing is, Vuex is global. Say I have 20 ments ponents->each have 10 ment ponents... why/how would i use vuex to allow each unique child->parent to municate to each other? all mutations for each parent->child pair would overlap one another since the state is shared by all ponents... @Sanjay – Mike Strong Commented Jul 6, 2018 at 7:28
• 1 Why do you feel a need to use an event bus, and not normal Vue events, in the first place, especially if these ponents have direct parent-child relation as you just explained? Just use normal events. – Linus Borg Commented Jul 6, 2018 at 9:14

2 Answers 2

I suggest using Vuex for all of your application. Doing so keeps your state in a single place. Using an event bus detracts from this, in that now you have two places containing state. Worse still, an event bus is less maintainable and often breaks the "one way data flow" promoted by Vue and Vuex (and other Flux implementations).

Vuex can be used for both application state and application data. Data being the usual stuff like customer details, etc. State being the "this sidebar hamburger menu is open" or "this modal is open" or "user selected this item in a list".

This then leads on to your "I just feel as Vuex should be used for app wide munications, not for munications between 2-3 neighbouring ponents". It's the same thing when you think about it.

If a parent ponent wishes to municate with a child ponent, it passes props down. If the child wishes to municate in a decoupled manner it emits events. That is perfectly fine for that scenario.

Try doing that with multiple nested ponents! A -> B -> C -> D

Imagine if D needed to update some state in B. How do you do that, emit events all the way up, and couple your ponents? Yuck, that is not the way to go. D should dispatch a Vuex action which in turn updates B via the store binding. What about when A needs to updated something in C? Now your B ponent needs special case extra props just to allow A to municate with C when B should be able to exist on it's own without A as a parent. Yuck again! Dispatch an action.

Communicating between sibling ponents or even ponents in totally different parts of the page is exactly one of the things Vuex is designed for: application state.

Removing your event bus and accepting this approach will make your code easier and more maintainable.

if your application is very plex and big than go with vuex which is better for the state management, if not than you can stick with props,event bus and all this.