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

Bind Stores to Vue reactivity system or, in the case of Events/Effects - bind to current Scope to use in DOM event handlers.

Designed for Vue 3 and Composition API exclusively.

Methods

useUnit(unit, options?)

Formulae

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

Arguments

1. unit (Event or Effect): Event or effect which will be bound to current Scope. A derived event, the result of map or filter, is rejected by the typings: it cannot be called
2. options? (Object): { scope, forceScope }, see scope options

Returns

(Function): Function to pass to event handlers. Will trigger given unit in current scope. When no scope is resolved, the unit itself is returned, as useUnit of effector-react does

Examples

Basic Usage

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

Formulae

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

Arguments

1. $store (Store): Store which will be bound to Vue reactivity system
2. options? (Object): { scope, forceScope }, see scope options

Returns

(Readonly<Ref<State>>): a shallow readonly ref. Its value is the state of the store itself, not a copy and not a reactive proxy, so it stays equal to scope.getState($store)

Examples

Basic Usage

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

Formulae

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

Arguments

1. shape Object or array of (Events or Effects or Stores): Every unit will be processed by useUnit and returned as a reactive value in case of Store or as a function to pass to event handlers in case of Event or Effect.
2. options? (Object): { scope, forceScope }, see scope options

Returns

(Object or Array):

• if Event or Effect: functions with the same names or keys as argument to pass to event handlers. Will trigger given unit in current Scope.
• if Store: a shallow readonly ref of given Store with the same names or keys as argument.

All stores of one call share one subscription.

Examples

Basic Usage

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

• scope? (Scope): the scope to read stores from and to bind events to, instead of the one provided to the application
• forceScope? (boolean): throw when no scope is resolved instead of falling back to global mode. Overrides the forceScope option of the plugin for this call

See How the scope is resolved.

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

Lifetime

The subscription lives as long as the component or the effect scope that called useUnit, and is disposed with onScopeDispose. A call inside a detached effectScope() unsubscribes when that scope is stopped. During a server render nothing is subscribed: the refs read the scope on access. The live option of the plugin overrides this detection.