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.
Installation
pnpm dlx 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 initial = toValue(initialValue)
const count = ref(initial)
const set = (value: number | ((current: number) => number)) => {
count.value = typeof value === 'function' ? value(count.value) : value
}
return {
count,
set,
inc: () => {
count.value += 1
},
dec: () => {
count.value -= 1
},
reset: () => {
count.value = initial
},
}
}API
ts
export function useCounter(initialValue: MaybeRefOrGetter<number> = 0)