見出し画像

Vuexのきほんの「ほ」

前回、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のデバッグ方法と非同期処理を使用する際の注意点をまとめていく予定です。

以上になります!

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

私はビールが大好きです! もし、私の記事が気に入ってくれて、ビールをおごってくれる人がいましたら、ぜひサポートしてください。 お礼としまして、ビールを飲んでいる写真をツイッターに上げます!(感謝の証)

hosonoです。読んでくださってありがとうございます!
2
東京でフロントエンドエンジニアをしています。 JavaScriptでおいしいごはんとビールを頂いてます。🍚🍺
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。