[TIL] 221208

EllaDev·2022년 12월 8일

Today I Learn

목록 보기

2/13

Demo API

useLazyAsyncData

페이지 렌더링 전에 초기 데이터를 가져오기 위해서 사용

<template>
  <div>
    {{ pending ? 'Loading' : count }}
  </div>
</template>
<script setup>
//Navigation will occur before fetching is complete. Handle pending and error states directly within your component's template

const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
	// Because count starts out null, you won't have access
  // to its contents immediately, but you can watch it.
})
</script>


// Using Async Setup
<script>
export default defineComponent({
  async setup() {
    const [{ data: organization }, { data: repos }] = await Promise.all([
      useFetch(`https://api.github.com/orgs/nuxt`),
      useFetch(`https://api.github.com/orgs/nuxt/repos`)
    ])
    return {
      organization,
      repos
    }
  }
})
</script>
<template>
  <header>
    <h1>{{ organization.login }}</h1>
    <p>{{ organization.description }}</p>
  </header>
</template>