useUnit

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.

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

Example

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

const inc = createEvent()
const $count = createStore(0).on(inc, x => x + 1)
// App.vue

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

import {inc, $count} from './model.js'

const onClick = useUnit(inc)
</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

Example

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

const inc = createEvent()
const $count = createStore(0).on(inc, x => x + 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.

Example

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

const inc = createEvent()
const $count = createStore(0).on(inc, x => x + 1)
// App.vue

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

import {$count, inc} from './model.js'

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

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