承诺不等待store.dispatch

Question

我刚刚开始学习Vue，正在将我的django项目移植到Vue。我一开始很简单。我的目标是创建一个组件，在加载时，该组件将使用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);
)})
},
}

我遇到的问题是，即使我使用的是promise，数据在操作完成和从商店提交突变之前就已经呈现出来了。

我的控制台日志如下：

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

您没有返回在getPatientList({ commit }, date)中创建的Promiseaxios.get(..).then(..)，因此会立即调用组件中的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);
)})
},