Memulai
Siklus Hidup
Peramban
Pengembangan
Paket Luar
useResetState
State yang bisa dikembalikan ke nilai awalnya.
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.
Pemasangan
npx 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 buatAwal = (): S =>
typeof initialState === 'function'
? (initialState as () => S)()
: initialState
const state = ref(buatAwal()) as Ref<S>
return {
state,
set: (nilai: S | ((kini: S) => S)) => {
state.value = typeof nilai === 'function'
? (nilai as (kini: S) => S)(state.value)
: nilai
},
reset: () => {
state.value = buatAwal()
},
}
}API
ts
export function useResetState<S>(initialState: S | (() => S))