This course has been updated! We now recommend you take the Introduction to Vue 3 course.

Check out a free preview of the full Introduction to Vue.js course:
The "Introducing Vuex" Lesson is part of the full, Introduction to Vue.js course featured in this preview video. Here's what you'd learn in this lesson:

Sarah introduces Vuex and its benefits. Vuex is a state management pattern and library for Vue.js applications. In a complex single page application, passing state between many components, and especially deeply nested or sibling components can get complicated quickly. Therefore for having one centralized place to access your data can help you stay organized.

Get Unlimited Access Now

Transcript from the "Introducing Vuex" Lesson

>> Sarah Drasner: All right, we're going to cover Vuex very quickly. Vuex is definitely one thing that we can get into the weeds on, and I would prefer if we didn't because this is an introductory course. I think the more we kind of go into edge cases, and crazy other things, the less people might understand.

[00:00:20] So, we're going to go over the basic functionality of VueX and how to get going and how to get started. And how to create a centralized store for your application so that you can get going using it for your application if you need to. But before we talk about all of that stuff, let's talk about what VueX is.

[00:00:39] So what is VueX? If you haven't worked with something like Redux before you might not understand or not have an idea of what this might do. You might see that in our components and in our application we're passing things like props between components. We're passing things like events between components and sometimes we have these, we're passing things from parent to child.

[00:01:03] But sometimes we have a lot of sibling communication and sometimes we have a lot of shared state across an application. So this is really, VueX is really nice to create a centralized store for sharing data and logic or even shared methods and async values. But this is for probably larger applications, it's not for a tiny thing like the things that we've been building so far today.

[00:01:30] We have unidirectional data flow, so that's a really nice thing because we keep things from becoming really, really convoluted. It's influenced by Flux application architecture, which is similar to Redux. It's very, very similar to Redux. It's basically a Vue's version of Redux. You can use Redux, if you would like.

[00:01:52] Vue is compatible with Redux. So if you're really married to Redux, or you're bringing it into an application where for some reason, you have Vue and React in the same application, you could do that. But I really suggest that if you're using Vue, you should use Vuex because Vuex is built and created for a Vue application.

[00:02:11] So if there are updates in the future in either direction, let's say Redux shifts path, and goes in another direction. You kinda know that VueX is always gonna move alongside of VueX and so that kind of keeps everything very stable. Why would we use something like Vue X?

[00:02:30] In a complex single page application, passing state between many different components and especially deeply nested or sibling components can get complicated really quickly. So having one centralised place to access your data can really help you stay organized. A lot of times when people say, when should you introduce VueX?

[00:02:51] People say, you just know. That's true, [LAUGH] technically, you kind of get to a point in your application logic where you're like, this doesn't make sense anymore, I really need to be moving into a centralized store. But it doesn't explain very much, so let's kind of go into this a little bit more.

[00:03:10] Multiple instances of children and siblings communicating and just kind of all over the place, but sharing the same types of logic across the application. Or one nice thing about keeping it in a centralized store is it's kind of self-documenting in a way. There are other ways of sharing logic between and events between different component.

[00:03:33] One we didn't cover today was an event bus, we could do that with an event bus as well. But event buses can kind of be a in a bunch of different places. If you have one centralized state store, you have it in one place, you can kind of understand, here is my state, here are the ways that I'm getting that state.

[00:03:52] Here are the ways that I'm mutating that state, and here are the ways that I'm using it asynchronously. And you have it in one kind of place that you can access and kind of keep organized. So that's something that I particularly like about it. It is not a replacement for single component methods.

[00:04:11] If you have a single component and you've got some state in there, and you're using methods on the component, don't put that into a store. Or don't start introducing VueX to handle that single components logic. That's not a good use for VueX.