import { useGate } from "effector-vue/composition";

Methods

useGate(Gate, props?, options?)

Opens a Gate for the lifetime of the component or the effect scope that called it, and keeps Gate.state in sync with props. Designed for Vue 3.

Formulae

useGate(Gate: Gate<Props>, props?: MaybeRefOrGetter<Props>, options?: ScopeOptions): void;

Arguments

1. Gate<Props> (Gate)
2. props? (Props | Ref<Props> | () => Props): a value, a ref or a getter. A ref, a getter and a reactive() object keep Gate.state in sync. A value that is not reactive is read when the gate opens and when it closes.
3. options? (Object): { scope, forceScope }, see EffectorScopePlugin. The open, close and set events of the gate are called in the resolved scope.

Returns

(void)

Lifetime

• In a component the gate opens on mount and closes when the component unmounts. Deactivation by <KeepAlive> keeps the gate open, only unmounting closes it.
• Outside of a component the gate opens right away and closes when the surrounding effect scope is stopped, effectScope() for example.
• With no active effect scope there is nothing to close the gate, so the call warns and leaves it open. app.runWithContext() gives an injection context and no effect scope, so run it inside effectScope().

Order of the events

open is called first, with the current props, and the gate samples them into set on its own. Later changes of the props reach set after that. Gate.state is not written while the gate is closed, and a mount runs one set:

import { sample } from "effector";
import { PageGate, loadPageFx } from "./model";

sample({ clock: PageGate.open, target: loadPageFx }); // gets the props of the mount

Server-side rendering

During a server render the gate stays closed: nothing unmounts on the server, so a gate opened there would never be closed, and its state would be serialized into the client. Load the data of a page with onServerPrefetch instead and use the gate on the client. This matches useGate of effector-react.

Examples

<script setup lang="ts">
import { useGate } from "effector-vue/composition";
import { PageGate } from "./model";

const props = defineProps<{ id: string }>();

useGate(PageGate, () => ({ id: props.id }));
</script>

<template>
  <div>{{ id }}</div>
</template>

See a full example