Vue - 最初のものが終了した後にのみ非同期アクションを呼び出す

Question

私のコンポーネントの中から2つのアクションを呼び出す必要がありますが、最初のものが100％完了した後でなければなりません。

私はこれをしようとしているが、それは

mounted() { 
    this.$store.dispatch('coinModule/loadApiCoins') 
     .then(() => { 
      this.$store.dispatch('coinModule/loadUserCoins') 
     }) 
     .catch(error => { 
      console.log(error) 
     }); 
}, 

機能しないと2つのアクションは、これらが他の方法で回避する必要がありますこれらの

loadApiCoins({ commit, dispatch, rootGetters }) { 
     Vue.axios({ 
       method: 'get', 
       url: 'https://api.coinmarketcap.com/v1/ticker/', 
       transformRequest: [(data, headers) => { 
        delete headers.common.Authorization 
        return data 
       }] 
      }) 
      .then(response => { commit('SET_API_COINS', response.data) }) 
      .catch(error => { console.log(error) }) 
    }, 

    loadUserCoins({ commit, dispatch, rootGetters }) { 
     Vue.axios.get('http://127.0.0.1:8000/api/coins/') 
      .then(response => { 
       commit('SET_USER_COINS', response.data) 
       commit('SET_USER_PORTFOLIO_OVERVIEW') 
      }) 
      .catch(error => { console.log(error) }) 
    } 

です。 Screen of my network tab

Answer 1

アクションをディスパッチすると、デフォルトではthenコールバックがありません。アクションがPromiseを返した場合にのみそうです。 axios.getコールはPromiseを返す必要がありますが、その操作では返されません。あなたはそれを返すだけでthenコールバックがmountedフックで発生します。

loadApiCoins({ commit, dispatch, rootGetters }) { 
    return Vue.axios({ 
    method: 'get', 
    url: 'https://api.coinmarketcap.com/v1/ticker/', 
    transformRequest: [(data, headers) => { 
     delete headers.common.Authorization 
     return data 
    }] 
    }) 
    .then(response => { commit('SET_API_COINS', response.data) }) 
    .catch(error => { console.log(error) }) 
},