One of the things I’ve been wanting to talk about for a while are the different ways data can be managed in a Vue application. There’s always lots of discussions on forums about how data is managed and not a lot of diving into why you would pick one style over the other.

So I made some videos. I created an application in three different styles, modeled after the three main ways of managing data and data flow in Vue. They are:

  1. Parent-child data flow
  2. Event Bus driven data flow
  3. Vuex

Each application that we’ll look at does the exact same thing, search a database of books and returns information to the user. But how they do that function is very different when you dive into the code.

My expectation is that we are going to dive into these applications and see how they tick, how they compare to one another, and where their pitfalls are so that you can make an informed decision when building your application which style will work for you.

The first video is an introduction into the project:

I have a project that handles data in a parent-child relationship. You’ll see this in the Vue documentation where they talk about how you pass properties from a parent down to a child using props and data flow from the child back up to the parent is handled via event emits. In this model, data is owned by the parent. Because of the props, if they change any of the data, that automatically gets populated down to a child. If a child wants to update the data, it has to emit an event to tell the parent to do it for it.

Next is the Event Bus. The Event Bus flattens the hierarchy of components so that there really is no “parent” managing everything anymore, but the components themselves communicate via a central bulletin board of information.

You still have a main component, but it’s just there to organize the display of the other components. The other components talk to each other via emits on an Event Bus that they’re all listening on. The event bus is a publish-subscribe system where a component can tell the event bus, “Hey, this just happened to me. Let anyone else know who cares.” And also a component can register on that event bus to say, “Hey, I want to listen to this certain type of event. If this happens, let me know.” In this way, the components don’t know about each other at all. They only know about these events that they’re communicating with.

If you ever want to swap one component out for another, as long as they listen to and emit the same events, then everything will still continue to work.

The biggest pitfall is when you have a lot of events. That can get unwieldy on a very big application and documentation of those events becomes very important.

Finally, we’ll take a look at Vuex. The components in the Vuex application connect to a Vuex store and can listen to certain state updates that might happen. The components can call on data from the Vuex store and call actions in Vuex to change that data. This acts much like the Event Bus, but uses reactive data instead of events.

We’re going to look at all of these different types of projects. They all look exactly the same in the browser. They all function exactly the same, except for the logic behind the scenes and how the data’s handled. So this should give a very clear idea of what the main differences are between them.

All of these projects contain the same components, in general, and they don’t change drastically from one project to the next. But what does change is where the responsibility lives for the data in the application. By looking closely at that and comparing and contrasting the different projects in future videos, we’ll get a clear understanding of how data in a Vue application flows and how best to decide what to use to get it to flow.

All of these projects are public as well, so feel free to grab the code and run it yourself. You can find them all at https://gitlab.com/clear-vue/vue-data-management-examples.

And my YouTube playlist with all the videos is at https://www.youtube.com/playlist?list=PLH-eIKOTM8bXVqooVgPGuo0SXB4_zgpe4.