vue.js - 在计算属性中使用 vuex getter

Question

我正在从组件 1 向组件 2 发送道具。如果调用组件 2，则设置开始和结束时间。组件 2 中的计算属性正在访问我的 vuex 存储中的一些 getter。在这家商店里，我打电话给其他一些吸气剂。这一切都有效。

问题是我对解决方案不满意。vuex 存储中的 getter 总是必须过滤相同的东西，例如当我getAllBookingsForBookingNumber从getStartTimeand调用 getter 时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));
        }
   }

标签： vue.jsvuex