Vuex内でAPIを叩きVue.jsのcreated内でstateを取得する

はじめに

初めての投稿です。

今回Vuex内でaxiosを使いAPIからデータを取得します。
サイトにアクセスした際にVue.jsのコンポーネントへデータを渡し画面にデータを表示させます。

準備

	バージョン	必須
Laravel	5.8.26	no
Vue.js	2.5.17	yes
Vuex	3.1.1	yes
axios	0.18	yes

自分はLaravelを使いAPIもそちらで用意しました。
APIさえ使えればどのような状態でも大丈夫です。

処理の流れ

①Vue.jsのcreated内でVuexのactionを呼び出す
②actionがAPIを叩く
③actionがAPIから取得したデータを引数としてmutationを呼び出す
④mutationでstateを更新する
⑤その後getterでstateを取得する

Vuexのコード

article.js

export default {
    namespaced: true,

    state: {
        articles: [],
    },

    getters: {
        getAll: state => {
            return state.articles;
        },

        getOne: state => id => {
            return state.articles.find(list => list.id === id);
        },
    },

    mutations: {
        setArticles: (state, payload) => {
            state.articles = payload.data;
        },
    },

    actions: {
        async setArticles({ commit }) {
            const payload = {
                data: '',
            };
            await axios.get('/api/articles')
            .then(response => {
                payload.data = response.data['data'];
                commit('setArticles', payload);
            })
            .catch(error => {
                console.log(error);
            });
        },
    },
}

APIから送られてくるデータはjsonです。

{
    "data": [
        {
            "id": 1,
            "title": "non",
            "body": "Sed non accusantium rem ad totam necessitatibus."
        },
        {
            "id": 2,
            "title": "totam",
            "body": "Ab et veritatis veniam et expedita voluptatem ipsam."
        },
        {
            "id": 3,
            "title": "magnam",
            "body": "Error enim laboriosam saepe delectus est."
        },
        {
            "id": 4,
            "title": "assumenda",
            "body": "Delectus tempore omnis occaecati quibusdam nisi."
        },
        {
            "id": 5,
            "title": "error",
            "body": "Quia exercitationem delectus vitae nulla corrupti eos."
        }
    ]
}

Vue.jsのコード

Article.vue

<template>
    <div>
        <p>{{ article_list }}</p>
    </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {

    data() {
        return {
            article_list: [],
        }
    },

    created() {
        //this.setArticles;     非同期で処理されるためか遅れて完了する
        //this.article_list = this.getAll;　     stateが更新されるよりも先に実行される
        this.setArticles().then( () => this.article_list = this.getAll );       //この書き方でうまく動いた
    },

    computed: {
        ...mapGetters('articles', [
            'getAll',
        ]),
    },

    methods: {
        ...mapActions('articles', [
            'setArticles',
        ]),
    },

}
</script>

コメントアウトしている箇所で苦しみました。

出力結果

きちんと出力されました。

最後に

JavaScriptを勉強したことがないためこのような書き方でいいのか正直わかっていません。
コメントのほうでご教授してもらえたら幸いです。