Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://effector.dev/en/api/effector-vue/useUnit below:

Website Navigation

• effector
• Blog

useUnit | effector

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.

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

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

import { createEvent, createStore, fork } from "effector";
const incremented = createEvent();
const $count = createStore(0);
$count.on(incremented, (count) => count + 1);

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

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

Reactive value of given Store

import { createEvent, createStore, fork } from "effector";
const incremented = createEvent();
const $count = createStore(0);
$count.on(incremented, (count) => count + 1);

<script setup>
  import { useUnit } from "effector-vue/composition";
  import { $count } from "./model.js";
  const count = useUnit($count);
</script>
<template>
  <p>Count: {{ count }}</p>
</template>

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.

(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.

import { createEvent, createStore, fork } from "effector";
const incremented = createEvent();
const $count = createStore(0);
$count.on(incremented, (count) => count + 1);

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4