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)

Arguments

1. unit (Event or Effect): Event or effect which will be bound to current Scope

Returns

(Function): Function to pass to event handlers. Will trigger given unit in current scope

Examples

Basic Usage

// model.js
import { createEvent, createStore, fork } from "effector";

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

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

// App.vue

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

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

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

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

useUnit($store)

Arguments

1. $store (Store): Store which will be bound to Vue reactivity system

Returns

Reactive value of given Store

Examples

Basic Usage

// model.js
import { createEvent, createStore, fork } from "effector";

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

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

// App.vue

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

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

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

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

useUnit(shape)

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.

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: reactive value of given Store with the same names or keys as argument.

Examples

Basic Usage

// model.js
import { createEvent, createStore, fork } from "effector";

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

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

// App.vue

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

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

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

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