Using Axios with Vuex

Now that you have seen the basics of working with Axios, it is time to consider how you could use it with Vuex. One way to do this simply is to just use Vuex to handle wrapping calls to the API, using Axios to perform the HTTP calls.

Exercise 10.02: Working with Axios in Vuex

We are going to take the previous functionality (loading the films and ships arrays) and rebuild it within the context of a Vuex store instead. As before, you will need to use the CLI to scaffold a new application and ensure you ask for Vuex to be included. When the CLI is done, you can then use the npm command to add Axios as well.

This exercise will be pretty much like the first application that we built in Exercise 10.01, Using Axios to Load Data from an API, but with some slight differences. Let's look at the UI first. On the initial load, both Films and Ships are empty:

Figure 10.2: Initial application UI

Notice that the Films portion has a...