Fullcalendar.getEvents() 不显示刚刚添加的事件或仍然显示删除的事件？

Question

我正在开发一个使用完整日历组件的应用程序。 可以通过弹出窗口添加事件，以便用户可以添加一些数据，例如描述等。在该弹出窗口上有一个“保存”按钮，它正在对后端进行 API 调用以保存事件数据。

代码如下： HTML部分

<full-calendar
        v-if="calendarOptions"
        id="fullcalendar"
        :options="calendarOptions"
        tabindex="0"
        @rendered="storeCalendar"
      ></full-calendar>

const storeCalendar = (api: CalendarApi | undefined): void => {
      if (api) {
        calendar.value = api;
      }
    };

下一部分是打开用于创建新事件的弹出对话框：

const openNewAgendaItemDialog = (
      agendaItem: AgendaItem,
      allDay: boolean | undefined = undefined
    ) => {
      $q.dialog({
        component: EventDetailsDialog,
        componentProps: {
          modelValue: agendaItem,
          isNew: true,
          zaak: zaak.value,
          isReadonly: isAgendaActueel.value,
          isAllDay: allDay,
          agendaItemTypes: determineAgendaItemsTypes(allDay),
        },
      }).onOk(async (returnValue: AgendaItemDialogReturnType) => {
        switch (returnValue.type) {
          case "new":
            createAgendaItem(zaakId, returnValue)     // http call to the backend
              .then(() => {
                createConfirmation(
                  "Succesvol opgeslagen",
                  `De agenda-item is succesvol opgeslagen.`
                );
              })
              .then(reload);
            break;
          case "delete":
            throw new Error(`Unexpected object: ${returnValue}`);
        }
      });
    };

const reload = (error: AxiosError | undefined | void = undefined): void => {

      if (!error || (!!error && error.response?.status !== HTTP_NOT_FOUND)) {
        console.log("reload: ");
        fetchEvents(zaakId, agendaId);        // this is a call to the backend
        fetchZaak(zaakId, true);
        fetchZaakWaarschuwingen(zaakId, true);

        inconsistentieCheck(true);
      }
    };

const inconsistentieCheck = (update: boolean): void => {
      
      calendar.value!.refetchEvents();
      let eventArray = calendar.value!.getEvents();      
      eventArray.forEach((event) => {console.log("event.title: " + event.title)})
};

在重新加载中调用的是 fetchEvents 方法，该方法正在对后端进行调用。 这里同样的刚刚添加或删除的事件并不在后端返回的事件中。 我认为 fetchEvents 调用在写入“createAgendaItem”完成之前完成。 通过创建、更新、删除来调用重新加载。

问题是：

添加新事件： 除了我刚刚添加的事件之外，我在控制台日志中看到了所有事件。 如果我更新其中一个事件（例如进行描述），则刚刚添加的事件将显示在控制台日志中。

删除事件： 如果我删除一个事件，那么它仍然存在于显示的控制台日志中。如果我更新现有事件并保存它，那么它会从控制台日志中的 getEvents() 列表中删除。

我的期望是 getEvents() 获取内存中的所有事件，但刚刚添加的事件不会丢失。

有人知道我做错了什么，所以我没有实际的事件列表吗？

编辑： 我添加了 HTML 部分和调用对话框窗口的代码。 （它是在 Vue、Kotlin、PostgreSQL 中创建的）

Answer 1

ADyson，最后这个问题。 我并没有一直在研究它，但这是因为 fetchEvents 正在调用后端并正在接收事件的“旧”状态，并且正在“刷新”我的 eventArray。

但我同时发现没有使用 eventStore，所以所有内容都是通过后端更新的。