鍍金池/ 問(wèn)答/HTML/ vuex如何通過(guò)dispatch操作ajax提交表單數(shù)據(jù)，然后拿到返回的狀態(tài)

vuex如何通過(guò)dispatch操作ajax提交表單數(shù)據(jù)，然后拿到返回的狀態(tài)

最近做了一個(gè)項(xiàng)目，在提交表單的時(shí)候，把a(bǔ)jax方法寫(xiě)在了vuex的actions中，但是，當(dāng)我執(zhí)行如下代碼之后，發(fā)現(xiàn)彈出來(lái)的還是原來(lái)的值，如果設(shè)置一個(gè)定時(shí)器如1s之后再?gòu)棾?，就可以了，?qǐng)問(wèn)有什么好的辦法解決嗎，我想拿到提交后的狀態(tài)，但是，dispatch是異步的，無(wú)法及時(shí)拿到
this.$store.dispatch('sendServerLoanCustomFilledDatas', this.filledData)

    .then(() => {
      alert(this.filledData.status)
    })
回答
編輯回答
愛(ài)礙唉

其實(shí)有兩種方式可以實(shí)現(xiàn)：

方法一：async/await

// actions.js
async sendServerLoanCustomFilledDatas({commit}) {
    awiat fetch(`/api/xxx`);
}

// template
async submit() {
    await this.$store.dispatch('sendServerLoanCustomFilledDatas', this.filledData);
    console.log(this.filledData.status);
}

方法二：組合Action

核心就是在你的action中返回一個(gè)promise
// actions.js
sendServerLoanCustomFilledDatas({commit}) {
    return new Promise((resolve, reject) => {
        fetch(`/api/xxx`)
        .then(res => res.json())
        .then(resData => {
            commit('xxxCommit', resData);
            resolve();  
        })
        .catch(reject);
    });
}

// template
this.$store.dispatch('sendServerLoanCustomFilledDatas', this.filledData)
.then(() => {});
2017年11月27日 02:54