Блог

Я отправляю реквизиты из компонента 1 в компонент 2. Если вызывается компонент 2, устанавливается время начала и окончания. Вычисляемые свойства в компоненте 2 получают доступ к некоторым геттерам в моем хранилище vuex. В этом хранилище я вызываю некоторые другие геттеры. Все это работает.

Проблема в том, что я не удовлетворен решением. Геттеры в хранилище 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));
        }
   }