title: vuex and axios debugging
body: <p>I'm going crazy, I have a working api that sends data, I connected it to a VueJS app and it was working fine. I'm trying to implement Vuex and I'm stuck. Here's my store.js file</p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  import axios from 'axios'
  Vue.use(Vuex);
  
  const state = {
          message: "I am groot",
          articles: []
      }
  const getters = {
          getArticles: (state) =&gt; {
              return state.articles;
          }
      }
  const actions = {
            getArticles: ({ commit }, data) =&gt; {
              axios.get('/articles').then( (articles) =&gt; {
                  commit('GET_ARTICLES', articles);
                  console.log(articles); // Trying to debug
              }, (err) =&gt; {
                  console.log(err);
              })
            }
      }
  const mutations =  {
          GET_ARTICLES: (state, {list}) =&gt; {
              state.articles = list;
          }   
      }
  const store = new Vuex.Store({
      state,
      getters,
      mutations,
      actions,
      mutations
  });
  console.log(store.state.articles); // this lines works but data is empty
  export default store
  </code></pre>
  
  <p>The console.log within axios call doesn't run and store.state.articles is empty. I must be missing something. I'm just trying to console the articles data on page load...</p>
  
  <p>Please help, I'm near insanity :)</p>
  
  <p>Component :</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="container"&gt;
      &lt;h1&gt;Test component yo !&lt;/h1&gt;
      &lt;p&gt;{{ message }}&lt;/p&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'Test',
          computed: {
              message() {
                  return this.$store.state.message
              }
          },
          mounted: () =&gt; {
              this.$store.dispatch('getArticles')
          }
  
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>App.js :</p>
  
  <pre><code>import Vue from 'vue';
  import ArticlesViewer from './articles_viewer.vue';
  import UserArticles from './user_articles.vue';
  import App from './app.vue'
  import store from './store'
  
  new Vue({
    el: '#app-container',
    store,
    render: h =&gt; h(App)
  })
  </code></pre>