useAsyncData 状态返回空闲

Question

const { data, status, error, refresh, clear } = await useAsyncData(
  'campaign',
   () => $fetch(`${$request.baseUrl}/cs/v1/campaign/find/${route.params.campaign}?mode=${route.query.mode || ''}`, {method: 'POST'}),
   {
    server: true, 
    deep: false
   }
)
console.log(data.value, status.value)

我有一个 NUXT 3 应用程序，我正在尝试实现 SSR。有一个页面，我必须在其中呈现活动，并且我想传递设置的 SEO 信息。但是，这似乎无法正常工作，因为然后我记录

data.value

和

status.value

，状态显示

idle

和

data

显示

null

。我已经检查过 NUXT 文档，但没有运气。请问我做错了什么

Answer 1

如果你想在反应变量发生变化时console.log，你可以观看它：

const { data, status, error, refresh, clear } = await useAsyncData(
  'campaign',
   () => $fetch(`${$request.baseUrl}/cs/v1/campaign/find/${route.params.campaign}?mode=${route.query.mode || ''}`, {method: 'POST'}),
   {
    server: true, 
    deep: false
   }
)
watchEffect(() => {
   console.log(data.value, status.value)
}

如果您想根据返回值设置 seo 标签，请查看 useSeoMeta。 在你的情况下，它可能看起来像这样

const { data, status, error, refresh, clear } = await useAsyncData(
  'campaign',
   () => $fetch(`${$request.baseUrl}/cs/v1/campaign/find/${route.params.campaign}?mode=${route.query.mode || ''}`, {method: 'POST'}),
   {
    server: true, 
    deep: false
   }
)
useSeoMeta({title: () => data.value.title})

PS。如果您除了在

useAsyncData

中获取数据之外没有执行任何操作，则可以使用 useFetch。