Valdres

useAtom

Signature
useAtom<T>(atom: Atom<T>): Ref<T>

valdres-vue Subscribe to and update an atom's value

Returns a reactive Ref that stays in sync with the atom. Writing to the ref updates the atom, and atom changes update the ref.

Usage

<script setup>
import { atom } from "valdres"
import { useAtom } from "valdres-vue"

const countAtom = atom(0)
const count = useAtom(countAtom)
</script>

<template>
    <div>
        <span>{{ count }}</span>
        <button @click="count++">+</button>
    </div>
</template>

Two-way binding

Since useAtom returns a Ref, it works with v-model:

<script setup>
import { atom } from "valdres"
import { useAtom } from "valdres-vue"

const nameAtom = atom("")
const name = useAtom(nameAtom)
</script>

<template>
    <input v-model="name" placeholder="Enter name" />
</template>

See also