title: Axios - get data from api in vuex actions?
body: <p>How to correctly transfer or rewrite the function in actions that will receive the first photo from each album in?</p>
  <p>my photos models:</p>
  <pre><code>import { api } from &quot;@/apis/config&quot;;
  const endPoint = 'photos'
  const state = {
      photos: []
  }
  const getters = {}
  const mutations = {
      SET_PHOTOS(state, data) {
          state.photos = data
      }
  }
  const actions = {
      loadMore(id) {
          api.get(`photos?albumId=${id}`).then(response =&gt; {
              return response.data[0].thumbnailUrl;
          });
      }
  }
  
  export default {
      namespaced: true,
      state,
      getters,
      actions,
      mutations
  };
  </code></pre>
  <p>And my album component:</p>
  <pre><code>...
  &lt;script&gt;
  import {mapActions} from &quot;vuex&quot;;
  export default {
    name: &quot;GridAlbums&quot;,
    props: ['album'],
    data() {
      return {
        loading: true,
        errored: false,
        photo: null
      }
    },
    mounted() {
      this.photo = this.loadMore(this.album.id)
    },
    methods: {
      ...mapActions(&quot;photos&quot;, [&quot;loadMore&quot;])
    }
  }
  &lt;/script&gt;
  ...
  </code></pre>
  <p>Here is my configuration file for api, where VUE_APP_HOST is <a href="https://jsonplaceholder.typicode.com/" rel="nofollow noreferrer">https://jsonplaceholder.typicode.com/</a></p>
  <pre><code>import axios from 'axios'
  
  export const api = axios.create({
      baseURL: process.env.VUE_APP_HOST,
  })
  
  api.interceptors.response.use(
      response =&gt; {
          return response
      },
      error =&gt; {
          return Promise.reject(error)
      }
  )
  </code></pre>
  <p>If you get the data this way, then everything turns out as it should:
  <a href="https://i.stack.imgur.com/p1uDc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p1uDc.png" alt="Getting data from jsonplaceholder.typicode.com" /></a></p>