useVModel

useVModel(store)

A hook function, which subscribes to watcher, that observes changes in the current store, so when recording results, the component will update automatically. Basically this hook use when need to work with forms (v-model).

Formulae

useVModel($store);

Designed for vue 3

Arguments

1. store (Store)
2. shape of Stores (Store)

Returns

(State)

Examples

Example 1 (Single Store)

import {createStore, createApi} from 'effector'
import {useVModel} from 'effector-vue/composition'

const $user = createStore({
  name: '',
  surname '',
  skills: ['CSS', 'HTML']
})

export default {
  setup() {
    const user = useVModel($user);

    return {
      user
    }
  }
}

<div id="app">
  <input type="text" v-model="user.name" />
  <input type="text" v-model="user.surname" />

  <div>
    <input type="checkbox" v-model="user.skills" value="HTML" />
    <input type="checkbox" v-model="user.skills" value="CSS" />
    <input type="checkbox" v-model="user.skills" value="JS" />
  </div>
</div>

Example 2 (Store Shape)

import {createStore, createApi} from 'effector'
import {useVModel} from 'effector-vue/composition'

const $name = createStore('')
const $surname = createStore('')
const $skills = createStore([])

const model = {
  name: $name,
  surname: $surname
  skills: $skills
}

export default {
  setup() {
    const user = useVModel(model);

    return {
      user
    }
  }
}

<div id="app">
  <input type="text" v-model="user.name" />
  <input type="text" v-model="user.surname" />

  <div>
    <input type="checkbox" v-model="user.skills" value="HTML" />
    <input type="checkbox" v-model="user.skills" value="CSS" />
    <input type="checkbox" v-model="user.skills" value="JS" />
  </div>
</div>