import { useVModel } from "effector-vue/composition";

A hook function, which subscribes to a watcher that observes changes in the current store, so when recording results, the component will automatically update. It is primarily used when working with forms (v-model) in Vue 3.

Methods

useVModel($store)

Formulae

useVModel($store: Store<State>): Ref<UnwrapRef<State>>;

Designed for Vue 3.

Arguments

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

Returns

(State)

Examples

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>

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