반응형
1 액션 2 커밋(교정) 하지만 첫 번째 커밋이 로딩 완료되기를 기다려야 함
내 행동은 다음과 같다:
actions: {
getFireBaseOrders(state) {
db.collection(`ordersOptimized`)
.where("date", ">=", 20210107)
.onSnapshot((res) => {
const changes = res.docChanges();
changes.forEach((change) => {
let payload = change.doc.data();
state.commit("firebaseOrders", payload);
});
});
state.commit("shopPerformanceTable")
},
이 가게들은 내 소방시설들을 내 주(州)로 밀어 넣는다.
첫 번째 돌연변이는 다음과 같다.
firebaseOrders(state, payload) {
for (let i = 0; i < Object.keys(payload).length - 1; i++) {
state.firebaseOrders.unshift(payload[i]);
}
두 번째 돌연변이는 다음과 같다.
shopPerformanceTable(state){
// console.log(state.firebaseOrders)
state.shopPerformanceTable = Object.values(
state.firebaseOrders.reduce((newArray, oldArray) => {
const key = oldArray.shopname;
newArray[key] = newArray[key] ?? {
shopName: oldArray.shopname,
orders: 0,
revenue: 0,
pendingOrders: 0,
};
newArray[key].orders++;
newArray[key].revenue += oldArray.subtotal;
if (oldArray.statuses == "pending") {
newArray[key].pendingOrders++;
}
return newArray;
}, {})
);
// console.log(state.shopPerformanceTable);
},
문제는, 두 번째 돌연변이에 대해 같은 방식으로 작동한다는 겁니다, 상태.FirebaseOrders는 여전히 빈 어레이로, 반환되고 어레이가 비어 있다.shopPerformanceTable 돌연변이를 실행하기 전에 돌연변이 firebaseOrders가 먼저 완료될 때까지 기다리는 방법
나는 파이어베이스는 사용하지 않지만, 너의 두 번째 커밋이 엉뚱한 곳에 있는 것 같아.다음을 시도해 보십시오.
getFireBaseOrders(state) {
db.collection(`ordersOptimized`)
.where("date", ">=", 20210107)
.onSnapshot((res) => {
const changes = res.docChanges();
changes.forEach((change) => {
let payload = change.doc.data();
state.commit("firebaseOrders", payload);
});
state.commit("shopPerformanceTable");
});
},
이건 두번째 커밋을onSnapshot
콜백, 그 후에forEach
처형당했어
반응형
'Programing' 카테고리의 다른 글
Vuex를 사용하여 나만의 클래스 객체를 저장할 수 있는가? (0) | 2022.04.10 |
---|---|
Vue 및 Axios가 포함된 진행 표시줄 (0) | 2022.04.10 |
Vuejs : v-for에 여러 개의 확인란이 있는 v-model (0) | 2022.04.10 |
vue v-for 루프, 클래스 개인 추가 (0) | 2022.04.10 |
VueJS - Ctrl+V를 감지하는 방법 (0) | 2022.04.10 |