vuexとaxiosのデバッグ

Question

私は狂っている、私はデータを送信する作業apiを持って、私はVueJSアプリに接続し、うまくいきました。私はVuexを実装しようとしていると私は固執しています。ここに私のstore.jsが

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 

がaxiosコール内にconsole.logが実行されないファイルのとstore.state.articlesは空です。私は何かを欠いているに違いない。私は助けてください...ページのロードの記事データをコンソールに

をしようと、私は狂気に近いんだよ:)

コンポーネント：

<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> 

App.js：

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) 
}) 

Answer 1

矢印機能を使用して、コンポーネントのライフサイクルフックmountedを定義します。 documentation 1として

：

（例えばvm.$watch('a', newVal => this.myMethod())）インスタンスのプロパティまたはコールバックの矢印機能を使用しないでください。矢印関数は親コンテキストにバインドされているため、は未定義になります。thisはVueインスタンスではありません。

あなたがそうのようにそれを定義する必要があります。

mounted: function() { 
    this.$store.dispatch('getArticles'); 
} 

あるいは、ECMAScriptの5速記使用：今

mounted() { 
    this.$store.dispatch('getArticles'); 
} 

を、あなたのdispatch方法は、あなたの記事の配列を取り込む、正しく呼び出されます。