Async State Practice

[00:00:00]
>> We'll dive into our first example which is sort of a work around, like an extra example from earlier. Where we're creating isRestocking state within Vuex, that gets toggled on fish inventory. We talked about how exactly we want to hook up the isRestocking states into our component, and how we want that action in the mutation to look.

[00:00:22]
And so in order to do that, we created an isRestocking sort of a computer property from the Frontend because we want that state to be updated. And the computer property is called isRestocking, and then we're just checking the specific state. So this .dollarStore.state isRestocking, and that is of course, a boolean property.

[00:00:43]
So if you go back up to the action itself, or to the state itself. We created a state called isRestocking, in this case, it's false. And then we have this fetch inventory API that we're, or this fetch inventory action in which we're pinging inventory, which is the API call.

[00:01:02]
And then before we make the API call, we want to commit to change the isRestocking to true. And then when the async action finishes, we want to change that back to false. And then the mutation itself will emulate that, so it takes in a state and a payload.

[00:01:22]
And then we are changing that isRestocking back to whatever the payload i,s so true or false. And so that's essentially what that looks like with everything hooked up.