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