Check out a free preview of the full Vuex for Intermediate Vue.js Developers course:
The "Async State Practice" Lesson is part of the full, Vuex for Intermediate Vue.js Developers course featured in this preview video. Here's what you'd learn in this lesson:

Divya goes through an exercise of getting data from an asynchronous action by using an isRestocking boolean computer property, checking the specific state, committing to change the restocking property to true, and, once the async action finishes, changing it back to false.

Get Unlimited Access Now

Transcript from the "Async State Practice" Lesson

[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.