Memulai
Siklus Hidup
Peramban
Pengembangan
Paket Luar
useCounter
Pencacah dengan aksi yang menyebut maksudnya.
10
Sebuah ref dan empat fungsi biasa — tidak lebih.
Sengaja tanpa min/max. Pembatasan yang dibutuhkan hampir selalu punya aturannya sendiri: ada yang menjepit, ada yang berputar, ada yang menolak. Satu pasang opsi tidak pernah cukup untuk ketiganya, dan menuliskannya di tempat pemakaian jauh lebih jelas daripada menebak-nebak di sini.
Pemasangan
npx shadcn-vue@latest add @kliping/use-counter Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Tanpa dependensi — tidak ada berkas lain yang ikut terpasang.
Salin kode berikut ke project Anda.
ts
import { ref, toValue } from 'vue'
import type { MaybeRefOrGetter } from 'vue'
export function useCounter(initialValue: MaybeRefOrGetter<number> = 0) {
const awal = toValue(initialValue)
const count = ref(awal)
const set = (nilai: number | ((kini: number) => number)) => {
count.value = typeof nilai === 'function' ? nilai(count.value) : nilai
}
return {
count,
set,
inc: () => { count.value += 1 },
dec: () => { count.value -= 1 },
reset: () => { count.value = awal },
}
}API
ts
export function useCounter(initialValue: MaybeRefOrGetter<number> = 0)