Gate (гейт) связывает компонент с моделью: пока компонент смонтирован, гейт открыт и хранит его пропсы. Например, через гейт можно собрать все нужные данные в момент монтирования компонента.

Так пропсы попадают обратно в стор, и получается обратная связь.

Гейт используется через хук useGate. Сторы и события гейта работают в приложении как обычные юниты.

У гейта два состояния:

• открыт: компонент смонтирован
• закрыт: компонент размонтирован

Гейт открывается при монтировании с пропсами, которые есть в этот момент, и сам передаёт их в .set, поэтому .open срабатывает раньше .set. Деактивация в <KeepAlive> оставляет гейт открытым, закрывает его только размонтирование. При серверном рендере гейт остаётся закрытым, см. useGate.

Свойства гейта

.state

Store<Props>: производный стор с текущим состоянием гейта. Состояние приходит из второго аргумента useGate.

.open

Event<Props>: событие, которое вызывается при монтировании гейта с текущими пропсами.

.close

Event<Props>: событие, которое вызывается при размонтировании гейта.

.status

Store<boolean>: булев производный стор, показывает, смонтирован ли гейт.

Пример

Модель реагирует на гейт. Компонент открывает его через useGate.

import { createEffect, sample } from "effector";
import { createGate } from "effector-vue/composition";

export const PageGate = createGate<{ id: string }>();

const loadPageFx = createEffect(async ({ id }: { id: string }) => {
  const response = await fetch(`/api/pages/${id}`);
  return response.json();
});

sample({ clock: PageGate.open, target: loadPageFx });

PageGate.status.watch((opened) => console.log("page opened:", opened));