10. Working with Vuex – Fetching Remote Data

Overview

In this chapter, you will learn how to work with remote APIs using the Axios library. You will make network calls and store results using Vuex. You will also see an example of how to store authentication tokens with Vuex and use it for further API calls.

By the end of this chapter, you will have a good idea of how Vuex can help abstract and create a wrapper for remote APIs, and ease their integration into a Vue application. This abstraction makes it easier to migrate to other APIs in the future, ensuring that the rest of your applications continue to work properly.

Introduction

In Chapter 9, Working with Vuex – State, Getters, Actions, and Mutations, you were introduced to Vuex and saw multiple examples of how to work with it to both read data from and write data to a store. We saw how multiple components could work with the store and all be kept in sync with little to no work at our end. In this chapter, we are going to expand our Vuex usage by integrating it with remote data by using Axios, a popular open source library that makes it easy to use network resources. Let's start off with a deeper look at Axios.

Axios (https://github.com/axios/axios) is a JavaScript library with both Node and browser support. It has a Promise-based API, which means you can use async and await if you wish. Other features include supporting default parameters (handy for APIs that require a key for every call) and the ability to transform your input and output data. We will not be covering every use case in this chapter, but you will get a good idea...

Installation of Axios

Much like Vuex, you have multiple ways of including Axios in your project. The simplest is pasting in a <script> tag pointing to the Content Delivery Network (CDN) for the library:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

The other option is to use the Node Package Manager, npm. Within an existing Vue application, you can install Axios as follows:

npm install axios

Once you have done this, your Vue components can then import the library as follows:

import axios from 'axios';

How you use Axios will depend on the API you are interacting with. Here is a simple example of hitting an imaginary API:

axios.get('https://www.raymondcamden.com/api/cats')
.then(res => {
  this.cats = res.data.results;
})
.catch(error => {
  console.error(error);
});

In the preceding example, we are performing a GET request (GET is the default) against an imaginary...

Using Defaults with Axios

While the code in Exercise 10.01, Using Axios to Load Data from an API works well, let's consider a slightly more advanced example. One of the features of Axios is the ability to set up defaults that are used in future calls. If you look at the two calls made in the preceding code, you can see they are similar. You can update the created method to make use of this:

created() {
  const api = axios.create({
    baseURL:'https://swapi.dev/api/',
    transformResponse(data) {
      data = JSON.parse(data);
      return data.results;
    }
  });
  api.get('films')
  .then(res => this.films = res.data);
  api.get('starships')
  .then(res => this.ships = res.data);
}

In this updated version, we switch to an instance of Axios. A default baseURL...

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

Summary

In this chapter, you learned a pretty important use case for Vuex—working with remote APIs. Remote APIs can provide an incredible amount of additional functionality to your applications, sometimes for little to no additional cost to the developer. You saw how to use Axios to make network calls easier and how to combine that with the state management features of Vuex. Finally, you put it together with Vue Router to create a simple login/authorization demo.

In the next chapter, we are going to discuss how to build more complex Vuex stores using modules.