vuex如何通过dispatch操作ajax提交表单数据，然后拿到返回的状态

Question

最近做了一个项目，在提交表单的时候，把ajax方法写在了vuex的actions中，但是，当我执行如下代码之后，发现弹出来的还是原来的值，如果设置一个定时器如1s之后再弹出，就可以了，请问有什么好的办法解决吗，我想拿到提交后的状态，但是，dispatch是异步的，无法及时拿到this.$store.dispatch('sendServerLoanCustomFilledDatas', this.filledData)    .then(() => {      alert(this.filledData.status)    })

Answer 1

其实有两种方式可以实现：

方法一：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中返回一个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(() => {});