Perform Async Updates using Vuex Actions with TypeScript

First, open the to-dos store file. Let's create here the actions. We can use the ActionTree type, which has the same notation on the get app tree. The first parameter is the state, and the second, the root state, which we will mark as any for now.

With actions, we can run multiple mutations. Remember, that mutations run synchronously, but with actions, we can update the state asynchronously. We are going to use this URL, which returns a list of items that we can query by ID, and we will pick the title.

Let's write an add to-do assign function, which takes the context as the first parameter. The context is the store instance that we will use in a second. For now, let's use fetch to make the IS call to that URL.

Let's pick it, and let's append an ID to it, just to return one item. We'll get it from the action payload parameter, which is the second one. Then we get the JSON data from the response that you see in data.json. That will return a promise with the given data.

Finally, let's create a to-do from the item. Let's first import the to-do type. Now, let's continue by adding a check property to false, and the text of the to-do will be equal to the item.title. Now, we want to add this to-do to the state, but remember that the only way to update the state is by using a mutation.

For that, the context has a commit function with a first parameter for the mutation name, and the second for the payload. We can use these several times. For example, to commit a state check mutation.

When that happens, context.commit becomes a bit cumbersome. We can use the object spread operator in order to only get the commit function, and make it much cleaner. We still need to add the actions to the Vuex store. Let's open the index file, import the actions, and add it to the instance.

Now, to try it, we just need to go the app view component, and let's clone that input. We will use the first for the synchronous mutation, and the second for the one that we take from the API.

We'll use an ID of the model, and when we press enter, we will call the add to-do assigned action, passing the ID. Let's import the action decorator, and use it just as the mutation, keeping the correct variable name. Finally, add an ID variable to the local state, and initialize it to one.

Let's try this out. We have the add to-do synchronous mutation that we were calling before, and the new one that calls the asynchronous action. When we press enter, it takes the test from the API. You can even feel that latency.