Методы
 
import { useGate } from "effector-vue/composition";
since

useGate появился в effector-vue 21.1.0

Методы

useGate(Gate, props?, options?)

Открывает Gate на время жизни компонента или effect scope, где вызван хук, и синхронизирует Gate.state с props. Для Vue 3.

Формула

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

Аргументы

  1. Gate<Props> (Gate)
  2. props? (MaybeRefOrGetter<Props>): значение, ref или геттер. Ref, геттер и объект reactive() держат Gate.state в синхронизации. Нереактивное значение читается, когда гейт открывается и когда закрывается.
  3. options? (Object): { scope, forceScope }, см. EffectorScopePlugin. События гейта open, close и set вызываются в найденном скоупе.
since

Аргумент options появился в effector-vue 23.3.0

since

props принимает значение или ref с effector-vue 23.3.0. Раньше он принимал только геттер

since

События гейта вызываются в найденном скоупе с effector-vue 23.3.0. Раньше они вызывались вне скоупа плагина

Возвращает

(void)

Время жизни

  • В компоненте гейт открывается при монтировании и закрывается при размонтировании. Деактивация в <KeepAlive> оставляет гейт открытым, закрывает его только размонтирование.
  • Вне компонента гейт открывается сразу и закрывается, когда останавливают окружающий effect scope, например effectScope().
  • Без активного effect scope закрыть гейт некому, поэтому вызов выводит предупреждение и оставляет гейт открытым. app.runWithContext() даёт контекст инъекции без effect scope, поэтому запускайте его внутри effectScope().
since

Закрытие вместе с effect scope появилось в effector-vue 23.3.0. Раньше гейт работал только внутри компонента

Порядок событий

since

open вызывается раньше set с effector-vue 23.3.0. Раньше первым срабатывал set, пока гейт был закрыт

Первым вызывается open с текущими пропсами, и гейт сам передаёт их в set. Последующие изменения пропсов приходят в set после этого. Пока гейт закрыт, Gate.state не пишется, а монтирование вызывает set один раз:

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


sample({ clock: PageGate.open, target: loadPageFx }); // получает пропсы монтирования

Серверный рендеринг

При серверном рендере гейт остаётся закрытым: на сервере ничего не размонтируется, поэтому открытый там гейт никогда бы не закрылся, а его состояние сериализовалось бы на клиент. Данные страницы загружайте в onServerPrefetch, а гейт используйте на клиенте. Так же работает useGate из effector-react.

since

С effector-vue 23.3.0 при серверном рендере не вызывается и set. Раньше пропсы попадали в Gate.state на сервере

Примеры

<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>

Полный пример

Перевод поддерживается сообществом

Документация на английском языке - самая актуальная, поскольку её пишет и обновляет команда effector. Перевод документации на другие языки осуществляется сообществом по мере наличия сил и желания.

Помните, что переведенные статьи могут быть неактуальными, поэтому для получения наиболее точной и актуальной информации рекомендуем использовать оригинальную англоязычную версию документации.

Соавторы
Commits