Moving State into Vuex

[00:00:00]
>> So I'll show you an example of what it looks like in Vue first. So let's assume you have a Vue instance. So this is a Vue instance not using single file components, just for clarity. So here is a Vue instance, we have this concept of data. So data has a supply of 40.

[00:00:20]
So that's whatever item count that is. And then you have a count like a dispense and a restock, which is sort of an increment and a decrement. In this case, the increment is not incrementing by 1, it's just incrementing to 40, which is the full number, and then dispense is just decrementing by 1.

[00:00:39]
So that's the methods associator. So in Vue without Vuex, you have states in data, and then you have methods which is where you interact with your data object. And then Vue sort of reactively changes, so the component changes what it shows pretty simply. So what we're gonna do is we're gonna take this and move it into Vuex, because it's fine in this particular instance.

[00:01:06]
But if we wanted to use similar methods and similar states, you don't wanna have to copy and paste across your apps. So let's add Vuex. So the example I showed you is using a Vue instance. So I just wanted to give you a quick example. A lot of the example in the first two parts of this course will be using CodePen.

[00:01:29]
So just so you know where exactly the Vuex is being added, this is CodePen. And within CodePen, if you go into the JavaScript settings, you'll see sort of a way of adding external scripts. And so I'm adding Vuex from there, just for clarity so you know where exactly the Vuex is added and how it's being used.

[00:01:48]
So, in order to use Vuex, you need to instantiate an instance of Vuex. And to do that, you can create a constant called store. And then you instantiate it with new Vuex.store. So this is default Vuex code. There's nothing too fancy about it. In this particular case, I'm just instantiating state actions, getters, mutations, and there's nothing in it yet cuz we haven't added anything.

[00:02:12]
But this is sort of the beginning state of how you use Vuex. And then from there, Vue doesn't actually know that Vuex exists because it's sort of separate. So we need to add Vuex to our Vue instance. And to do that, we can just add the store in.

[00:02:29]
So we'll see the con store from line 1 to 6. And then below in our Vue instance, we're just passing the store in to our instance itself. And so that with this now Vue has a concept of the store. Obviously, there's nothing in the store yet, so let's change that.

[00:02:48]
So what we'll do is we need to change the data properties as well as the methods so that it's using the Vuex store. And to do this, what we can do is we'll start with the state or the data attribute first because that seems fairly straightforward. So what we'll do is we'll add the supply as a item in the state's store.

[00:03:11]
So here in line 3, you have supply of 40. So that's very similar to what we had in data. We obviously have to remove it from data cuz we're no longer using it. And then one thing to note is that Vuex is a store that changes so state is constantly changing.

[00:03:27]
And in Vue, the way you tell a component that state is changing is through computed properties because computer properties listens for any changes and updates. It's sort of cached if nothing changes, and then it updates as updates happen. So for us to know and be notified of anything that happens in the state store, we'll add a computer property.

[00:03:49]
And in this case, we call it supply which is the same as the state of the state property, but you don't necessarily have to, it doesn't have to be a one to one, you can use it whatever you want. But the thing you do have to remember is line 15 how exactly you're accessing it.

[00:04:07]
So this.$store, this is new. We haven't talked about this yet. But this.$store is how you access the store, essentially. So whenever Vue gets the instance of the store, this.$store is how it accesses that particular store. So you would do this.$store.state, will give you the entire state as an object.

[00:04:29]
And then you can sort of pick and choose whichever item you want from that object. And right now we only have one item, we have supply. And so we're gonna do this.$store.state.supply because we're specifically grabbing the supply. And so with this, we have a computer property that we can now use.

[00:04:45]
And so anytime supply in the Vuex changes, we can update accordingly. Of course, nothing's gonna change because we have no way of updating that particular thing. So let's move on to the second part, which is actually moving every part of the methods into actions. So, again, we're gonna be using actions and mutations for now.

[00:05:08]
They are fairly similar except for the fact that an action sort of commits a mutation. And I'm gonna use that word commit, because in Vue, that's sort of how we call it. It's commit and even in the language in the syntax, it says commit. So let's look at how that looks like.

[00:05:26]
So we have the method, the Vue instance on the bottom, we have the method dispense. And right now dispense is sort of doing just like a decrement, a very simple decrement. But we want it to use the store itself. And so to do this, very similar to how we're accessing state in Vuex this.$store is how you access the store.

[00:05:49]
In this instance we're not accessing the store anymore, we're accessing specific actions. And so, in Vuex when you want the components to do something like to change an action in the store, we call it a dispatch. So it dispatches actions and then the store decides what to do.

[00:06:08]
So in this case we are dispatching a dispense action. And then if we move up to the top and we look at actions, we have to call a method or an action called dispense. And the name on line 6 needs to match the name on 29, because specifically if you're dispatching to an action, that action needs to exist.

[00:06:31]
And so in this case, we're dispatching dispense. So we have an action called dispense. And then this is sort of the kicker, because as I mentioned, actions commit mutations. So we'll look at how exactly we connect those two pieces. So for now, we'll create a mutation called dispense.

[00:06:47]
And so we'll have line 12 and line 6, they're both called dispense. They're sort of similar. So I don't think the naming is really changed. But the way in which you communicate between them is through this thing called context. So, the action takes in a argument called context and this is default.

[00:07:07]
This is not something you have to do explicitly. Is just Vuex has a concept of context. And so within context you have various pieces of methods. We're gonna look at commits specifically. And so we're gonna take context.commit. So context.commit is just calling any mutation. And so you will pass in the name of the mutation specifically.

[00:07:32]
So context.commit, the name of the mutation which is the same as the action, so dispense, and then that will call dispense itself. And similar to how the actions sort of have a default's parameter, mutations also have a default and in this case it's state. So state is the default because it's mutating state.

[00:07:53]
So it needs that. And then you would just do state.supply minus minus, which is a decrement. And so that's how you would connect the two together. We create an action, we create a mutation, we connected the action and the mutation, and then we connected the component to the action.

[00:08:08]
So component dispatches action, action commits mutations, state changes and then the component is updated appropriately. And so this is sort of how Vuex works. Very similar to the diagram I showed you, there's this flow of events that happen. So the component itself doesn't do anything. The component just notifies the store to change the state and the state handles it or the store handles it.