Vuex: Axios GET request returns undefined inside component

Question

I am using Vuex/Axios to make GET requests to an API. When a component mounts, I am dispatching an action to the Vuex store and making the Axios GET request. In the Vuex action, the Axios GET request returns the response as expected but the response inside the component is returning undefined. What am I doing wrong?

axios/index.js

import axios from 'axios';

const API_URL = 'http://localhost:3000/api/v1/';

const plainAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
});

export { plainAxiosInstance };

Vuex module: store/modules/character.js. In this file response logs the correct response. The fetchCharacters event gets triggered in a component.

import { plainAxiosInstance } from '@/axios';

const characterModule = {
  namespaced: true,
  state: {
    characters: []
  },
  mutations: {
    SET_CHARACTERS(state, characters) {
      state.characters = characters;
    }
  },
  actions: {
    async fetchCharacters({ commit }) {
      await plainAxiosInstance
        .get('/characters')
        .then(response => {
          let characters = response.data;
          commit('SET_CHARACTERS', characters);
          console.log(characters); <-- Logs the expected response data
          return characters;
        })
        .catch(error => console.log('Failed to fetch characters', error));
    }
  },
  getters: {}
};

export default characterModule;

I am then dispatching the Vuex action inside of a Vue component on mount:

<script>
import { mapState, mapActions } from 'vuex';

export default {
  mounted() {
    this.fetchCharacters()
      .then(response => {
        console.log('response', response);
        // response is logging undefined here <----
      })
      .catch(error => {
        console.log(error);
      });
  },
  computed: mapState(['character']),
  methods: mapActions('character', ['fetchCharacters'])
};
</script>

The console.log in modules/character.js logs the data as expected and then the response inside of the component logs undefined. I made sure to return the variable characters in the Vuex module. And I also made the Vuex action fetchCharacters async. So why is the response in the component returning undefined?

Thanks if you can help.

skirtle skirtle · Accepted Answer · 2019-11-07T05:08:00

Change this:

async fetchCharacters({ commit }) {
  await plainAxiosInstance

to this:

fetchCharacters({ commit }) {
  return plainAxiosInstance

You can keep the async if you want but it won't make any difference.

In its present form the action will implicitly return a promise and that promise won't resolve until the request is complete. However there's nothing to tell it to resolve that promise to the desired value.

Instead of waiting for the promise inside the action you can just return that promise instead. Externally that won't make any difference as you'll just get back a promise either way but crucially that promise will resolve to the correct value once the request is complete.

Vuex: Axios GET request returns undefined inside component

1 Answers