effector-vue

Vue bindings for effector

Installation

npm install --save effector effector-vue

Or using yarn

yarn add effector effector-vue

Usage

import {createStore, createEvent} from 'effector'

export const inputText = createEvent()

export const $text = createStore('').on(inputText, (_, text) => text)

export const $size = $text.map(text => text.length)

<script lang="ts" setup>
  import {useUnit} from 'effector-vue/composition'
  import {$text, $size, inputText} from './model'

  const text = useUnit($text)
  const size = useUnit($size)

  const handleTextChange = useUnit(inputText)
</script>

<template>
  <form>
    <input
      type="text"
      @input="(e) => handleTextChange(e.currentTarget.value)"
      :value="text"
    />
    <p>Length: {{ size }}</p>
  </form>
</template>

Try it

useUnit in docs Units in docs createStore in docs createEvent in docs