async/await
Vue.js + Vuex において非同期処理は、actions 内で実行するのが良い
アクションを定義するメソッドの中で action の dispatch や mutation への commit を任意のタイミングで実行できるので、柔軟に処理を組み合わせることができるから
例1:axios を使った promise ベースの http リクエストをだすメソッド
code: /api/fetchListAPI.js
import axios from 'axios'
const fetchList = async () => {
const res = await axios.get("https://api.com/fetch-list", {})
return res.data
};
export default fetchListAPI
axios とは
http リクエストをだすためによく使われる npm。
async function
普通の function literal の前に async をつける
async function の中で await を書く
promise オブジェクトを待ち受け、それが fulfilled もしくは rejected (なんらかの解決) になるまで停止
ここでは axios の get が終了するまで await で待つ
取得できたら、res に axios の結果が代入され、次の行に移動
async function の中で return した値は promise object として返される
dispatch/commit
actions のメソッドは、commit, dispatch を受け取って実行できる
任意のタイミングで実行
commit で mutation にアクセス
dispatch で action にアクセス
actions のメソッドは async function にできる
その中で await を使うことができる
commit で渡す payload となる引数の場所でも await できる
await dispatch('fetchList')
その場合、dispatch された action が返す promise オブジェクトを待つ
code: actions.js
import fetchListAPI from '@/api/fetchListAPI'
const actions = {
async getList({ commit, dispatch, state }, payload) {
commit('SET_LIST', await dispatch('fetchList'))
},
async fetchList({ commit, dispatch, state }, payload) {
const list = await fetchListAPI()
dispatch('dispatchDone')
return list
},
dispatchDone() {
console.log('fetch done')
}
}
export default actions
code: mutations.js
const mutations = {
SET_LIST(state, payload) {
console.log('payload', payload)
state.List = payload
}
}
export default mutations
https://qiita.com/superyusuke/items/0d71a8e741dd72833b26
#Vuex
#ES