Pabrik nilai awalnya dipanggil ulang di tiap reset, bukan sekali di awal. Itu bagian terpenting dari composable ini.
Di Vue, state.value.nama = '...' adalah pemakaian yang wajar — objek state memang biasa diutak-atik di tempat. Kalau pabriknya cuma dipanggil sekali, objek awalnya ikut termutasi, dan reset mengembalikan keadaan yang sudah kotor: persis kebalikan dari yang diminta namanya.
Nilai biasa yang bukan pabrik tetap disimpan apa adanya.
Installation
pnpm dlx shadcn-vue@latest add @kliping/use-reset-state 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 } from 'vue'
import type { Ref } from 'vue'
export function useResetState<S>(initialState: S | (() => S)) {
const createInitial = (): S =>
typeof initialState === 'function' ? (initialState as () => S)() : initialState
const state = ref(createInitial()) as Ref<S>
return {
state,
set: (value: S | ((current: S) => S)) => {
state.value = typeof value === 'function' ? (value as (current: S) => S)(state.value) : value
},
reset: () => {
state.value = createInitial()
},
}
}API
ts
export function useResetState<S>(initialState: S | (() => S))