Nuxt'da composables nima va ulardan qanday to'g'ri foydalanish kerak?

Savol

Nuxt'da composables nima va ularni yozishda qanday qoidalarga rioya qilish kerak?

Qisqa javob

Composables — qayta ishlatiladigan reaktiv logikani inkapsulyatsiya qiluvchi useXxx() funksiyalari. Nuxt'da composables/ papkasidagi barcha fayllar import qilmasdan, avtomatik ravishda komponentlarda mavjud bo'ladi.

Batafsil javob

Composable — Vue'ning reaktiv primitivlaridan (ref, computed, watch) va kerak bo'lganda Nuxt-composables'laridan (useState, useFetch, useRoute) foydalanadigan oddiy JS/TS-funksiya.

Asosiy qoidalar:

• Nom use bilan boshlanishi kerak — bu Vue uchun ESLint plugin ichida boshqa composable/hooklarni chaqirish mumkinligini tushunadigan konvensiya.
• Composable <script setup>ning (yoki boshqa composable'ning) yuqori darajasida chaqirilishi kerak, if/sikllar ichida emas — aks holda reaktivlikning joriy komponentga bog'lanishi buzilishi mumkin.
• Butun ilova uchun umumiy va SSR uchun xavfsiz bo'lishi kerak bo'lgan holat uchun useState('key', () => initialValue) ishlatiladi — komponentdan tashqaridagi oddiy ref SSR'da turli foydalanuvchilarning so'rovlari orasida "sizib chiqadi".
• Ma'lumotlar bilan ishlaydigan composable (yuklash, keshlash) — useFetch/queryCollectionni yashirish va komponentga allaqachon tayyor, tiplangan ma'lumotlarni qaytarish uchun yaxshi joy.

Misol

// composables/useMediaQuery.ts
export function useMediaQuery(query: string) {
  const matches = ref(false)

  onMounted(() => {
    const mql = window.matchMedia(query)
    matches.value = mql.matches
    const listener = (e: MediaQueryListEvent) => { matches.value = e.matches }
    mql.addEventListener('change', listener)
    onUnmounted(() => mql.removeEventListener('change', listener))
  })

  return matches
}

<script setup>
const isMobile = useMediaQuery('(max-width: 768px)')
</script>

Qo'shimcha savollar

• Nega komponentdan tashqaridagi oddiy ref SSR uchun xavfsiz emas, useState esa xavfsiz?
• Composable'ni komponentdan alohida qanday test qilish mumkin?
• Bitta composable'ni boshqasi ichida chaqirish mumkinmi?