title: Vuex: Axios GET request returns undefined inside component
body: <p>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?</p>
  
  <p><code>axios/index.js</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Vuex module: <code>store/modules/character.js</code>. In this file <code>response</code> logs the correct response. The <code>fetchCharacters</code> event gets triggered in a component.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; {
            let characters = response.data;
            commit('SET_CHARACTERS', characters);
            console.log(characters); &lt;-- Logs the expected response data
            return characters;
          })
          .catch(error =&gt; console.log('Failed to fetch characters', error));
      }
    },
    getters: {}
  };
  
  export default characterModule;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am then dispatching the Vuex action inside of a Vue component on mount:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  import { mapState, mapActions } from 'vuex';
  
  export default {
    mounted() {
      this.fetchCharacters()
        .then(response =&gt; {
          console.log('response', response);
          // response is logging undefined here &lt;----
        })
        .catch(error =&gt; {
          console.log(error);
        });
    },
    computed: mapState(['character']),
    methods: mapActions('character', ['fetchCharacters'])
  };
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The console.log in <code>modules/character.js</code> logs the data as expected and then the response inside of the component logs undefined. I made sure to return the variable <code>characters</code> in the Vuex module. And I also made the Vuex action <code>fetchCharacters</code> async. So why is the response in the component returning undefined?</p>
  
  <p>Thanks if you can help. </p>