问vuex和axios调试

EN

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) => {
            return state.articles;
        }
    }
const actions = {
          getArticles: ({ commit }, data) => {
            axios.get('/articles').then( (articles) => {
                commit('GET_ARTICLES', articles);
                console.log(articles); // Trying to debug
            }, (err) => {
                console.log(err);
            })
          }
    }
const mutations =  {
        GET_ARTICLES: (state, {list}) => {
            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

<template>
  <div class="container">
    <h1>Test component yo !</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
    export default {
        name: 'Test',
        computed: {
            message() {
                return this.$store.state.message
            }
        },
        mounted: () => {
            this.$store.dispatch('getArticles')
        }

    }
</script>

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 => h(App)
})