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

Связывает сторы с реактивностью Vue. События и эффекты привязывает к текущему скоупу, чтобы вызывать их из обработчиков DOM-событий.

Только для Vue 3 и Composition API.

Методы

useUnit(unit, options?)

Формула

useUnit(event: EventCallable<T>, options?: ScopeOptions): (payload: T) => T;
useUnit(effect: Effect<Params, Done, Fail>, options?: ScopeOptions): (payload: Params) => Promise<Done>;

Аргументы

1. unit (Событие или эффект): событие или эффект, который привяжется к текущему скоупу. Производное событие, результат map или filter, типы не принимают: его нельзя вызвать
2. options? (Object): { scope, forceScope }, см. опции скоупа

Возвращает

(Function): функция для обработчиков событий. Запускает юнит в текущем скоупе. Если скоуп не найден, возвращается сам юнит, как в useUnit из effector-react

Примеры

Базовый пример

import { createEvent, createStore } from "effector";

export const incremented = createEvent();
export const $count = createStore(0);

$count.on(incremented, (count) => count + 1);

<script setup lang="ts">
import { useUnit } from "effector-vue/composition";

import { incremented } from "./model";

const onClick = useUnit(incremented);
</script>

<template>
  <button @click="onClick">increment</button>
</template>

useUnit($store, options?)

Формула

useUnit($store: Store<State>, options?: ScopeOptions): Readonly<Ref<State>>;

Аргументы

1. $store (Стор): стор, который свяжется с реактивностью Vue
2. options? (Object): { scope, forceScope }, см. опции скоупа

Возвращает

(Readonly<Ref<State>>): неглубокий readonly-ref. Его value это само состояние стора, без копии и без реактивного прокси, поэтому оно равно scope.getState($store)

Примеры

Базовый пример

<script setup lang="ts">
import { useUnit } from "effector-vue/composition";

import { $count } from "./model";

const count = useUnit($count);
</script>

<template>
  <p>Count: {{ count }}</p>
</template>

useUnit(shape, options?)

Формула

useUnit({ a: Store<A>, b: EventCallable<B> }, options?: ScopeOptions): { a: Readonly<Ref<A>>, b: (payload: B) => B };
useUnit([Store<A>, EventCallable<B>], options?: ScopeOptions): [Readonly<Ref<A>>, (payload: B) => B];

Аргументы

1. shape: объект или массив событий, эффектов и сторов. Каждый юнит обрабатывается как в useUnit: стор становится реактивным значением, событие или эффект становится функцией для обработчиков событий
2. options? (Object): { scope, forceScope }, см. опции скоупа

Возвращает

(Object или Array) с теми же ключами, что у аргумента:

• для события или эффекта: функция для обработчиков событий. Запускает юнит в текущем скоупе
• для стора: неглубокий readonly-ref этого стора

Все сторы одного вызова используют одну подписку.

Примеры

Базовый пример

<script setup lang="ts">
import { useUnit } from "effector-vue/composition";

import { $count, incremented } from "./model";

const { count, handleClick } = useUnit({ count: $count, handleClick: incremented });
</script>

<template>
  <p>Count: {{ count }}</p>
  <button @click="handleClick">increment</button>
</template>

Опции скоупа

• scope? (Scope): скоуп, из которого читаются сторы и к которому привязываются события, вместо скоупа приложения
• forceScope? (boolean): бросить ошибку, если скоуп не найден, вместо перехода в глобальный режим. Перекрывает опцию forceScope плагина для этого вызова

Порядок поиска скоупа описан в разделе Как выбирается скоуп.

const count = useUnit($count, { scope });
const onClick = useUnit(incremented, { forceScope: true });

Время жизни

Подписка живёт, пока жив компонент или effect scope, где вызван useUnit, и снимается через onScopeDispose. Вызов внутри отдельного effectScope() отписывается, когда этот scope останавливают. Во время серверного рендера подписок нет: ref читает скоуп при каждом обращении. Опция live плагина перекрывает это определение.