Gate connects a component to the model: the gate is open while the component is mounted and holds its props. For example, a gate can collect all required data when the component mounts.

This allows you to send props back to Store to create feedback loop.

Gate can be used via useGate hook. Gate stores and events can be used in the application as regular units

Gate can have two states:

• Open, which means mounted
• Closed, which means unmounted

A gate opens on mount with the props it has at that moment and passes them to .set itself, so .open fires before .set. <KeepAlive> deactivation leaves the gate open, only unmounting closes it. During a server render the gate stays closed, see useGate.

Gate Properties

.state

Store<Props>: DerivedStore with current state of the given gate. The state comes from the second argument of useGate.

.open

Event<Props>: Event which will be called during gate mounting, with the current props

.close

Event<Props>: Event which will be called during a gate unmounting.

.status

Store<boolean>: Boolean DerivedStore, which show if given gate is mounted.

Example

The model reacts to the gate. A component opens it with 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));