Moving to State & Actions Solution

[00:00:00]
>> All right, so I imagine that exercise was hopefully fairly straightforward. Cuz I went over it earlier in terms of how exactly to move a method into a action and a mutation. But let's cover it together just so that we have a better sense of how exactly that works.

[00:00:19]
So this is the code pen that you're working on and it is in working condition, very similar. But what we did is we essentially moved a couple of things over. So we moved the actions and the mutations or we moved the particular method into actions and mutations. So you see a dispense action that takes in context, which is the parameter, a default parameter it takes in, and then it commits a specific mutation.

[00:00:48]
And so we have the mutation of that name which is called dispense. It takes in a default parameter of state. And then we decrement the state itself, which then updates accordingly. And then of course, we have the states, the specific state property supply. And then in our component itself, we are using a computed property because it's updating.

[00:01:11]
And we call that supply and then we call the specific store, the specific property in the state store, so this.$store.state.supply. And then we call it supply. And so if we looked at the, there's so much here, but here exactly, this h4 is where exactly that supply is updating.

[00:01:33]
And so restock and dispense is calling the specific methods in our component which then dispatches actions and mutations. So that's sort of how it works. It's very, again, very straightforward. We're essentially moving one piece over and then another. And so with that, we're gonna move to a second piece of doing that, which is the restock counter.

[00:02:00]
So we talked a little about the dispense action, but let's talk about the restock as well, cuz that's something that's adding to. And so our restock essentially was a method in our components that just added the supply. So this is a typo on 25. It should be just the supply = 40 because it sets it to 40.

[00:02:22]
It doesn't increment by one. But nevermind, it doesn't matter in this case because we're moving that particular method into an action and mutation. So we still need that method. We don't want to get rid of it because that's how our component will know what to do with that particular thing.

[00:02:40]
So we'll keep the name restock. But instead of changing the state directly because the state is no longer local to the instance, we'll just dispatch it to the store. So this.$store.dispatch is dispatching an action to the store. We'll call our action restock, because it is a restock. And then within our store, we'll now create an action called restock that again takes in that default parameter context.

[00:03:09]
And then we want to make sure we're committing that particular state change as well. So context.commit is what's committing the mutation. We call it the exact same name because again, an action or mutation for now is not much different. And then in our mutation, we have a thing called restock.

[00:03:28]
It takes in a default parameter of state, and then that's when we're setting the specific supply back to 40. So it's a restock to this arbitrary number 40. Right now, we've created an action, we've created a mutation, and then we've hooked those up in our component via dispatch.

[00:03:45]
So we've done a couple of things. And again, very similar to what we did earlier. There's actually not a lot of difference besides the specific name of the action and what we're doing. But the movement and how exactly we're translating our method into actions and mutations is the same.