我正在将道具从组件1发送到组件2。如果将组件2称为开始和结束时间,则进行设置。组件2中的计算属性正在访问vuex存储中的一些getter。在这家商店 我称呼其他吸气剂。全部都可以。
问题是我对解决方案不满意。 vuex存储中的吸气剂总是必须过滤相同的内容,例如,当我从getAllBookingsForBookingNumber
和getStartTime
调用吸气剂getEndTime
时。为此,必须首先过滤所有法院。我想你看到了问题...
也许有更有效的方法吗?
组件1:
<app-book-info v-bind:courtId="selectedCourtId"
v-bind:slotId="selectedSlotId">
</app-book-info>´
组件2:
<template>..{{ getStartTime }}...</template>
props: {
courtId: {
type: Number,
default: 1,
},
slotId: {
type: Number,
default: 1
}
},
computed: {
getStartTime() {
return this.$store.getters.getStartTime(this.courtId, this.slotId);
},
getEndTime() {
return this.$store.getters.getEndTime(this.courtId, this.slotId);
}
store.js
getters: {
getStartTime: (state, getters) => (courtId, slotId) => {
return getters.getAllBookingsForBookingNumber(courtId, slotId)[0].time;
},
getEndTime: (state, getters) => (courtId, slotId) => {
let allBookings = getters.getAllBookingsForBookingNumber(courtId, slotId);
let length = allBookings.length;
return allBookings[length - 1].time;
},
getBookingNumber: (state, getters) => (courtId, slotId) => {
return getters.getCourt(courtId)[0].slots.filter(slot => slot.id === slotId)
[0].bookingNumber;
},
getAllBookingsForBookingNumber: (state, getters) => (courtId, slotId) => {
return getters.getCourt(courtId)[0].slots.filter(slot => slot.bookingNumber ===
getters.getBookingNumber(courtId, slotId));
}
}