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.

Future

This API can completely replace the following APIs:

In the future, these APIs can be deprecated and removed.

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