見出し画像

Vuexのきほんの「ほ」

hosono kotaro

前回、Vuexの基本をざっと説明しました。

今回は、Actionsでの非同期処理について解説します。
例えば、ActionsからJSONオブジェクトをAjaxで読み込む場合、下記のようにします。

mutations: {
    addList(state, payload) {
        state.list = payload
    }
},
actions: {
    async addList(context) {
        context.commit('addList', await axios.get('https://xxx.xxx/posts/'))
    }
}

mutationsのaddListのstateの後に「payload」という引数があります。
これは、actionsからcommitするデータを引き受けます。
（上記のactionsのaddListの第二引数の値を引き受けます）

actionsのaddListはaxiosを使用してJSONを読み込むため、asyncを記載します。
commitする際に第一引数でmutationsのaddlistを指定します。
第二引数でaxiosを使用し、JSONをgetします。
その際にawaitを使用して、実際にJSONを取得するまで待機します。

async / await に関しては、下記の記事が参考になります。

上記をまとめると下記のようになります。

・Mutationsの第二引数でActionsのデータを引き受ける（payload）
・Actionsの第二引数で非同期処理を記載する
・Actionsにasync / await を使用して非同期処理をする

JSONを使用した処理はよく遭遇するので、これらをVuexで扱うことができれば、Webアプリケーションを構築するのに非常に役に立ちます。
次回は、Vuexのデバッグ方法と非同期処理を使用する際の注意点をまとめていく予定です。

以上になります！