useIsHydrated
Apakah halamannya sudah dihidrasi di peramban.
Terhidrasi: false
Di HTML hasil render server nilainya false, dan tombolnya mati.
Ini salah satu dari sedikit composable "lifecycle" yang tetap perlu ada di Vue, tidak seperti useMount atau useUpdateEffect yang cuma menamai ulang sesuatu yang sudah bawaan. Sebabnya nyata: dokumentasi Kliping dirender di server, dan HTML yang dihasilkan harus sama persis dengan gambaran pertama di peramban. Menggambar sesuatu yang cuma bisa diketahui di peramban — lebar layar, isi localStorage, waktu setempat — membuat keduanya berbeda, dan Vue membuang lalu menggambar ulang bagiannya.
Polanya:
<button :disabled="!terhidrasi">Salin</button>onMounted tidak pernah berjalan di server, jadi nilainya false saat dirender di sana dan false juga pada gambaran pertama di peramban. Itulah yang membuat keduanya cocok.
Pemasangan
npx shadcn-vue@latest add @kliping/use-is-hydrated Perlu @kliping terdaftar di components.json project Anda. Lihat cara menyiapkannya.
Ikut terpasang sendiri: saat-terpasang.
Salin dulu is-browser, saat-terpasang — masing-masing memuat sumbernya di halamannya sendiri — lalu tempel berkas ini.
import { readonly, ref } from 'vue'
import { saatTerpasang } from '@/lib/saat-terpasang'
export function useIsHydrated() {
const terhidrasi = ref(false)
saatTerpasang(() => {
terhidrasi.value = true
})
return readonly(terhidrasi)
}API
export function useIsHydrated()