nuxt async获取props的数据

在 Nuxt 中，我们可以使用 `asyncData` 方法来获取异步数据，并将其作为组件的 `props` 传递。下面是一个简单的示例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const { data } = await $axios.get('https://jsonplaceholder.typicode.com/posts')
    return { posts: data, title: 'Posts' }
  },
  props: {
    title: String,
    posts: Array
  }
}
</script>

在上面的代码中，我们使用 `asyncData` 方法从 `https://jsonplaceholder.typicode.com/posts` 获取文章列表，并将其作为 `posts` 属性传递给组件。我们还将 `title` 属性设置为 `Posts`，这样我们就可以在组件中使用它来显示标题。

请注意，在 `asyncData` 方法中，我们使用了 `$axios` 对象来发出 HTTP 请求。这是因为在 Nuxt 中，我们可以使用 `$axios` 对象来发送 HTTP 请求。如果您需要使用其他 HTTP 客户端库，您可以根据需要进行安装和配置。

最后，在组件中，我们使用 `v-for` 指令来遍历 `posts` 数组，并使用 `key` 属性来设置每个列表项的唯一标识符。