Made withVue.jsClip

Learn Vuex In 10 Minutes (Vue.js State Management)

P

Program With Erik

Creator on the Vue.js channel

Watch on YouTube ↗

149K viewsDec 6, 201713:28 runtime

Learn the fundamentals of Vuex, the official state management library for Vue.js, in this concise tutorial. Discover how Vuex, inspired by patterns like Redux and Flux, helps you manage application state in a centralized store to avoid prop drilling in large apps. This video…

Chapters

#vuejs#clip#frontend

Introduction to Vuex

Vuex is a state management pattern and library for Vue.js applications. Inspired by architectures like Flux and Redux, it provides a centralized store for application data, ensuring that state can be managed in a predictable way.

Why Use Vuex?

Vuex is particularly useful in larger applications to solve common state management problems.

It helps avoid prop drilling, which is the cumbersome process of passing data down through many levels of nested components.
It creates a single source of truth by storing shared application state in one central place, accessible by any component.

Note
You don't need to put all your data in the Vuex store. It's perfectly fine to maintain local state within components for data that isn't shared.

The Four Core Concepts of Vuex

The video explains the four fundamental building blocks of a Vuex store:

State: The object containing your application's data.
Getters: Functions for retrieving and computing derived state.
Mutations: Functions for modifying the state synchronously.
Actions: Functions for handling asynchronous operations, which then commit mutations.

1. State

The state is a single object that houses the data you want to be globally available in your application. This object is the single source of truth.

const store = new Vuex.Store({
  state: {
    message: 'Hello from Vuex',
    counter: 0
  }
});

2. Getters

Getters are used to access state from the store. Think of them as computed properties for your store. You can access state directly, but getters are useful for performing calculations or transformations on the state before it's returned.

A getter function receives the state as its first argument.
Inside a component, you can access a getter via store.getters.getterName.

// In the store
getters: {
  message: state => state.message.toUpperCase()
}

// In a component's computed property
message() {
  return store.getters.message;
}

3. Mutations

Mutations are the only way to actually change the state in a Vuex store. This ensures that all state changes are explicit and trackable.

Each mutation handler receives state as the first argument and an optional payload as the second.
You trigger a mutation with store.commit('mutationName', payload).

Important
Mutations must be synchronous. For any asynchronous operations (like API calls), you must use Actions.

// In the store
mutations: {
  increment(state, payload) {
    state.counter += payload;
  }
}

// In a component method
this.$store.commit('increment', 10);

4. Actions

Actions are similar to mutations, but with two key differences: they can contain asynchronous operations, and instead of mutating the state directly, they commit mutations.

Action handlers receive a context object with the same methods/properties as the store instance, so you can call context.commit.
You trigger an action with store.dispatch('actionName', payload).

// In the store
actions: {
  increment(context, payload) {
    // Can perform async logic here, e.g., setTimeout or an API call
    context.commit('increment', payload);
  }
}

// In a component method
this.$store.dispatch('increment', 20);

What is Vuex?

Hey guys, today we're going to look at Vuex. We're going to do it quickly in ten minutes, so let's begin.

So if you guys don't know, Vuex is a state management library pattern and library for Vue.js. So you may, if you're in the React world, you may have heard of Redux, may have heard of patterns called like Flux. So they are very similar. Both Vuex and Redux are kind of based on something called Flux, which is a type of pattern where we're dispatching actions and we have different types of state.

So we're going to go ahead and create just this really simple app. So if you can see right here, this is our app. We have a welcome message, we have some messages that are coming from our Vuex, and then we have a button that increments. So nothing too special here, but this is really important to us because we just want to learn some really basics of how this works.

Initial Application Setup

So let's go ahead and just create the basic part of our app here right now. So you can see here, I just went in and just copied and pasted some basic HTML code. I include a script tag for both Vue and Vuex from a CDN here. So if we go new Vue and then we'll call app, and we'll call actually yell, and then we'll call this app and should make sure things are working. We're gonna have a data function here, it's gonna return an object. And that object, we're gonna have welcome and welcome we're gonna put in 'Hello World'.

And then inside here, of course, inside our body, we're going to have a div tag. We'll have it ID="app", and remember you're always gonna have to have at least one div tag in here for your Vue application. And then we're gonna put in double brackets and we're gonna put in welcome. So that were just to make sure this works. Refresh it. Okay, we see a 'Hello World', so we know we got that working.

So let's just let's do this, put it in h1 tags. We're not gonna do any CSS or anything in this. We're just gonna do some really basic HTML and then we're gonna introduce Vuex here. So let's go ahead and create Vuex.

Now, you guys probably wondering, I'm actually using just a single HTML file here, but we could certainly do everything we're doing here using Vue CLI. So in a future episode, I'll go ahead and do a more advanced look at Vuex and we'll go ahead and put it into a Vue CLI project. This actually works just as well. I mean, pretty much everything I'm doing here, you can do inside Vue CLI. So if you learn it using this way, it's the same thing basically.

The "Why" of Vuex: Centralized State

So I'm gonna do a const store = new Vuex.Store(). And I'm gonna refresh it. Okay my 'Hello World' is big and I'm gonna go ahead and open up the inspector here, to make sure if I have any errors that I can catch it before it gets too late.

And then inside here, I'm going to create some ways, some part of Vuex. Now, like I said, Vuex is a way, a state management pattern. So normally in Vue, and the reason you may want to use something like Vuex, especially if you have larger applications, is that you end up using a lot of props and you end up passing a lot of data from one component to another.

And there are things like buses that you can create in Vue, but it really becomes pretty bloated after a while and your data can be kind of stored in a lot of different places. So what the idea here is with Vuex is that we're storing all the data in one central place and any component can actually get it. So that is really important because we don't want to have to, let's say we have a component like we have component1 here and then it inherited it, component2 is a child of comp1, and then we have a child of comp1, you know, a child of a child of comp1. I mean, you can just keep on going and you would have to actually pass everything from comp1 to child comp1 to child comp1. And so the data is going to be all over the place. It's not perfect and things can get complicated.

Now, that's not to say you would put all your data or all your your state inside the store. You may actually have some local state in some of your Vue components, but some things that you may want to share between multiple things in your app, you want to put in the store.

Core Concept 1: State

So the first thing we do is, there's four things we need to learn here in this 10 minutes. We're going to look at state, we're going to look at mutations, we're going to look at actions, and finally we're going to look at getters. So these are the four that we care about.

So in our state, this is where we're going to define kind of the data for our application that we want to store and and have it be available throughout the application in all our Vue.js instances and components. So let's just make right here, we'll create a message. We'll call them welcome... we'll call it, yeah, let's call it message and we'll put in 'Hello World'. And then... well let's put it a different message. We'll call it 'Hello from Vuex' so we don't get confused. And then we'll put a counter and we'll set it as zero.

Core Concept 2: Getters

Now, if we want to access this message and count, there's a couple of ways to do that. So first, if it's really simple, we actually... getters are one way of retrieving information from our store. We can actually access it without a getter. So we can do a computed property here. So we'll do computed here. And then I'll put a colon here. I'm sure I'm doing this right. And then we'll name a computed property. So let's just call it, we can call it message. It doesn't, can't have the same name, it doesn't matter. And then in the message we return it. We can return store.state.message.

And then inside here we can grab message. So let's see if that works. All right, so here's a 'Hello from Vuex'. So you see here we're grabbing the information from our store and we're displaying it inside our h2 tag here by just using a computed property.

But let's say that you wanted to do, you wanted your getter to, let's say you wanted to make some kind of modification of this and instead of having a computed property and doing some modification to it here, you can create a getter so every component gets it from the same place. So this makes a lot of sense in larger apps.

So we can do this. We could put in the getter, we can call it message here and it actually takes a couple variables, it takes state, it takes one argument state. And then we can return state.message, which is the name of our our variable here, message. And then we can do something like .toUpperCase(), something like that. And then instead of doing store.state.message, we can do store.getters.message. So we save it there.

"Message of undefined." So let me make sure I got this right. getters. Ah, I'm missing an S. So okay, you can see here, it's all capital letters: "HELLO FROM VUEX". I'll make that bigger. So, "Hello from Vuex". So we know it's working. So now instead of getting it directly from the state, we're getting it from the getters. So you could see, you can imagine that you can set up a bunch of different getters here and do a bunch of different things and have all your components grab it and you're not going to have to, you know, repeat the same code in every single component. So that's one way to do it.

Core Concept 3: Mutations

So another thing we can do is mutations. So let's take a look at our counter here. So let's go ahead, we can do another computed property, and let's create another getter. So we'll call it counter.Once again, it has arguments state and you can return state.count. And then inside here, our computed property, we can also do the same thing here. We can have a count, and then it can return store.getters.count.

So if we refresh it and we used the name counter, and we called it here, we'll put in count. There it is. So you can see zero here. So we're getting it from this computed property, it's returning it out of here, just the state count. But what if, what if we wanted to do some kind of mutation on this and change it?

So let's create a button here, and we'll just do a button. We're gonna have a click action attached to it. We're gonna call it pressed. And we're gonna call it 'Increment Counter'. And if we save it, we have 'Increment Counter'. Of course, we're gonna get an error because we haven't created this action yet. But let's create it.

So we'll go back down here right after computed. We're going to create something called methods. I think it's methods with an s, and that's going to be an object. And then we're going to have our pressed. And then in our pressed, we're going to do something. So let's save it. All right, so we no longer have it, but this press doesn't do anything.

So what we can do now is we can have a mutation in here. So let's create a mutation that increments the counter. So we're going to call it increment. We're almost up out of the 10 minutes, so there's gonna be a few minutes after 10, but that's okay. We're gonna have a state on it and a payload. And then in the state payload, we're going to do state.count and they're going to += the payload. So what this is saying is every time you do the increment, it's going to take the state, it's going to take something you pass into it, and then equal it and add it to it. So then what we could do here is we can do, instead of getting it, we can do this. We do store and we use something called commit. And we do commit, and then we can call the name of the mutation, which we call increment, and we can add 10 to it. So let's try that. Okay, that works. So basically, we've reproduced what we had before, but really, really, really...

Core Concept 4: Actions

quickly, I know we're over our 10-minute allotment, we're going on to 11 minutes, but really quickly, if you go to actions here, we can have an action called increment as well. And then inside the action here, we can put inside a state and a payload as well. And then inside the action, we can do state.dispatch and then we put in the name increment and then we put in payload.

Now, the reason we have actions is because you can actually access the mutations directly, but if you have something that's asynchronous, then you must use actions. Mutations are always synchronous, so this is always synchronous. And actions can be asynchronous or synchronous. So if I had some kind of timer here, setTimeout, then I would use it.

So then inside here, actually, excuse me, this is store... state commit. And then in here, instead of doing store.commit, I do store.dispatch. And then the name of it, which we call increment. And then we put in, I don't know, let's say 20. Save it, refresh it. You see now it's going by 20. So that is a really, really quick way of doing Vuex.

Conclusion & Giveaway

I hope you guys liked the video. If you like these type of videos, please click that subscribe button. And in fact, I'm giving away a copy of my book, an ebook copy of my book. All you need to do is subscribe to this channel, make sure you click on that subscribe, and then tell me below why you guys like Vuex. Tell me a little bit about Vuex. Do you know anything about it? Let me know. Thanks. Take care. Bye.