nuxt3破坏useLazyAsyncData

Question

我正试图从API中构造一个响应，如下例所示：

const {
  data: {
    value: [firstResult, secondResult],
  },
  pending,
} = await useLazyAsyncData("explore-brands", () =>
  Promise.all([
    find("brands"),
    find("discover-brand"),
  ])
);

但这会导致一个错误：

TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))

怎么解决这个问题？

Answer 1

useAsyncData/useLazyAsyncData将| null添加到data类型(从nuxt版本3.0.0-rc.9开始)。

所以你应该这样做：

const { data, pending } = await useLazyAsyncData(...)

if (data.value) {
  const [firstResult, secondResult] = data.value
  // ...
} else {
  // Handle the null case
}

PS:当你使用懒惰的变体时，你为什么要等待？