如何使用useAsyncData和Nuxt Content获取和转换数据？

Question

我在项目中使用Nuxt和Nuxt Content，我想显示csv文件的内容。

根据文档，我使用以下代码：

const { data }  = await useAsyncData<any | Concert[]>('concerts', () => queryContent('/concerts').findOne())

到目前为止，我没有遇到任何问题。但是一旦我获得了数据，我需要在显示它之前将其用于两个函数。我尝试了很多方法，比如在 useAsyncData 可组合项上使用转换选项，但我没能成功，最后我想出了这个解决方案：

const sorted = computed(() => data.value?.body ? sortConcerts(data.value.body) : null)
const concerts = computed(() => sorted.value ? formatConcerts(sorted.value, en) : null)

只有当我将内容包装在组件中时，这才适用于开发。 但是当我部署应用程序时（在netlify上使用“nuxt生成”），我只在第一次访问路线时看到数据。第二次，我的列表是空的。

我觉得我没有做正确的事，但我找不到解决办法。有人有解决方案来实现我想要的吗？

非常感谢！

Answer 1

你可以试试这个

<script setup>
  const sorted = ref()
  const concerts = ref()

  const { data }  = await useAsyncData<any | Concert[]>('concerts', () => queryContent('/concerts').findOne())
    
  if (data.value) {
    sorted.value = data.value?.body
    concerts.value = formatConcerts(sorted.value, en)
  }
</script>