title: What is the right way to make API calls with Vuex?
body: <p>I have a Vue Webpack app with Vuex (I am new to both, coming in from the Ember world). I've currently got it setup to use vue-resource with two files like this:</p>
  
  <p><strong>/src/store/api.js</strong></p>
  
  <pre><code>import Vue from 'vue';
  import { store } from './store';
  
  export default {
    get(url, request) {
      return Vue.http
        .get(store.state.apiBaseUrl + url, request)
        .then(response =&gt; Promise.resolve(response.body))
        .catch(error =&gt; Promise.reject(error));
    },
    post(url, request) {
      return Vue.http
        .post(store.state.apiBaseUrl + url, request)
        .then(response =&gt; Promise.resolve(response))
        .catch(error =&gt; Promise.reject(error));
    },
    // Other HTTP methods removed for simplicity
  };
  </code></pre>
  
  <p>I then import the api.js file above into my <strong>/src/store/store.js</strong> file like this:</p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  import Api from './api';
  
  Vue.use(Vuex);
  
  // eslint-disable-next-line
  export const store = new Vuex.Store({
    state: {
      apiBaseUrl: 'https://apis.myapp.com/v1',
      authenticatedUser: null,
    },
  
    mutations: {
      /**
       * Updates a specific property in the store
       * @param {object} state The store's state
       * @param {object} data An object containing the property and value
       */
      updateProperty: (state, data) =&gt; {
        state[data.property] = data.value;
      },
    },
  
    actions: {
      usersCreate: (context, data) =&gt; {
        Api.post('/users', data)
          .then(response =&gt; context.commit('updateProperty', { property: 'authenticatedUser', value: response.body }))
          // eslint-disable-next-line
          .catch(error =&gt; console.error(error));
      },
    },
  });
  </code></pre>
  
  <p>When I need to create a new user, I simply <code>this.$store.dispatch('usersCreate', { // my data });</code> in my component. This works just fine but I have a few issues:</p>
  
  <ol>
  <li>I can't capture issues in the component to show toast messages etc.
  I can't even check if the AJAX call went through successfully.</li>
  <li>If I have a lot of APIs, I'll have to write a lot of actions in my store.js file which is not ideal. I could of course create a standard action that accepts the HTTP method, URL etc. and just call that but I am not sure if this is a good practice.</li>
  </ol>
  
  <p>What is the right way to go about it? How can I check for the AJAX failure / success state in the component where I dispatch the action? What is the best practice to make API calls when using Vuex?</p>