承诺不等待 store.dispatch

Question

我刚开始学习 Vue，正在努力将我的 django 项目移植到 Vue。我开始很简单。我的 objective 是创建一个组件，该组件在加载时将使用 Axios 从我的服务器获取患者列表。

所以在我的组件中，我写道：

export default {
data() {
    return {
    patients: [],
    };
},
created() {
    console.log(`Created Component:Patient Waiting`);
    this.$store
    .dispatch("getPatientList", this.today)
    .then(() => {
        console.log(`Finished dispatch of getPatientList from component.`);
        this.patients = this.$store.getters.patientNotSeenList;
        console.log(`Now, this.patients is:`);
        console.log(this.patients);
    })
    .catch((error) => {
        console.log("Got error 2");
        console.log(error);
    });
},
};

模板：

<p v-for="patient in patients" :key="patient.checkinno">
    {{ patient.checkinno }}
</p>

在我的 vuex 商店中，我有：

export default createStore({
    state: {    
    },
    getters: {
        patientNotSeenList: (state) => {
            console.log(`In store, in getter:patientNotSeenList:`);
            return state.patientNotSeenList;
        },
    },
    mutations: {
        STORE_PATIENT_LIST(state, data) {
            state.patientSeenList = data.seen
            state.patientNotSeenList = data.notseen
        },
    },
    actions: {
        getPatientList({ commit }, date) {
            console.log(`[In Store::getPatientList, getting patient list...]`);
            axios
            .get(constants.API_GETPATIENT_LIST, {
            params: {
                ....                
            },
            })
            .then(({ data }) => {
                console.log(`Got data is`);
                console.log(data);                
                let patientSeen = data.results.filter(
                    (checkin) => checkin.consulted == 1
                );
                let patientNotSeen = data.results.filter(
                    (checkin) => checkin.consulted == 0
                );
                console.log(`patientSeen is`);
                console.log(patientSeen);
                console.log(`patientNotSeen is`);
                console.log(patientNotSeen);
                console.log(`[Finished action for Store::getPatientList]`);
                commit("STORE_PATIENT_LIST", {
                    seen: patientSeen,
                    notseen: patientNotSeen,
                });
            })
            .catch((error) => {
                console.log(
                    "In Store::getPatientList,Could not get data from API. Maybe not logged in, or dont have token?"
                    console.log(error);
            )})
        },
    }

我遇到的问题是，即使我使用的是承诺，数据也会在操作完成和从商店提交突变之前呈现。

我的控制台日志如下所示：

Created Component: Patient Waiting
index.js?4360:141 [In Store::getPatientList, getting patient list...]
PatientWaiting.vue?110a:144 Finished dispatch of getPatientList from component.
index.js?4360:33 In store, in getter:patientNotSeenList:
PatientWaiting.vue?110a:146 Now, this.patients is:
PatientWaiting.vue?110a:147 undefined
TopBar.vue?92f9:90 Route location from TopBar: PatientWaiting
index.js?4360:150 Got data is
index.js?4360:151 {count: 1, next: null, previous: null, results: Array(1)}
index.js?4360:152 Results is
index.js?4360:153 [{…}]
index.js?4360:160 patientSeen is
index.js?4360:161 []
index.js?4360:162 patientNotSeen is
index.js?4360:163 [{…}]
index.js?4360:164 [Finished action for Store::getPatientList]

所以我得到了一个空列表。为什么会出错？

Answer 1

您没有返回 axios.get(..).then(..) 在 getPatientList({ commit }, date) 中创建的 Promise，因此会立即调用您组件中的 then()。将 getPatientList 更改为：

        getPatientList({ commit }, date) {
            console.log(`[In Store::getPatientList, getting patient list...]`);
            return axios.get(constants.API_GETPATIENT_LIST, {
                params: {
                ....                
                },
            }).then(({ data }) => {
                console.log(`Got data is`);
                console.log(data);                
                let patientSeen = data.results.filter(
                    (checkin) => checkin.consulted == 1
                );
                let patientNotSeen = data.results.filter(
                    (checkin) => checkin.consulted == 0
                );
                console.log(`patientSeen is`);
                console.log(patientSeen);
                console.log(`patientNotSeen is`);
                console.log(patientNotSeen);
                console.log(`[Finished action for Store::getPatientList]`);
                commit("STORE_PATIENT_LIST", {
                    seen: patientSeen,
                    notseen: patientNotSeen,
                });
            })
            .catch((error) => {
                console.log(
                    "In Store::getPatientList,Could not get data from API. Maybe not logged in, or dont have token?"
                    console.log(error);
            )})
        },

承诺不等待 store.dispatch

Promise not waiting for store.dispatch

vue.js

axios

vuex

vuejs3