在计算属性中使用vuex getter

时间:2020-10-07 15:47:17

标签: vue.js vuex

我正在将道具从组件1发送到组件2。如果将组件2称为开始和结束时间,则进行设置。组件2中的计算属性正在访问vuex存储中的一些getter。在这家商店 我称呼其他吸气剂。全部都可以。

问题是我对解决方案不满意。 vuex存储中的吸气剂总是必须过滤相同的内容,例如,当我从getAllBookingsForBookingNumbergetStartTime调用吸气剂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));
        }
   }

0 个答案:

没有答案
相关问题