Question

代码段用Pug和Coffeescript编写

我了解asyncData及其局限性，但是从Nuxt.js中的组件获取异步数据的最佳实践是什么？

我在页面上写了一些逻辑，但显然不可接受，因为我的卡多于两张。

asyncData: ->
    axios.defaults.baseURL = 'https://api.github.com/repos/username'
    { data: repo1 } = await axios '/repo1'
    { data: repo4 } = await axios '/repo4'
    { data: repo8 } = await axios '/repo8'
    { data: repo18 } = await axios '/repo18'
    {
      repo1:
        stargazers: repo1.stargazers_count
        description: repo1.description
        url: repo1.html_url
      repo4:
        stargazers: repo4.stargazers_count
        description: repo4.description
        url: repo4.html_url
      repo8:
        stargazers: repo8.stargazers_count
        description: repo8.description
        url: repo8.html_url
      repo18:
        stargazers: repo18.stargazers_count
        description: repo18.description
        url: repo18.html_url
    }

CardSlot(
      title='repo1'
      :subtitle='repo1.description'
      :titleLink='repo1.url'
    )
     h1 {{repo1.stargazers}}
CardSlot(
      title='repo4'
      :subtitle='repo4.description'
      :titleLink='repo4.url'
    )
     h1 {{repo4.stargazers}}
CardSlot(
      title='repo8'
      :subtitle='repo8.description'
      :titleLink='repo8.url'
    )
     h1 {{repo8.stargazers}}
CardSlot(
      title='repo18'
      :subtitle='repo18.description'
      :titleLink='repo18.url'
    )
     h1 {{repo18.stargazers}}

我只想写：

CardSlot(
      title='repo1'
)
CardSlot(
      title='repo4'
)
CardSlot(
      title='repo8'
)
CardSlot(
      title='repo18'
)

在CardSlot组件内部，所有数据魔术都会发生

添加＃3：最终推送！

所以现在我所需要的就是以某种方式将其传递到props \ slots 根据{{1}}

asyncData

我想我需要定义一个数组，因此可以在页面加载之前和之后以某种方式将数据传递到卡插槽后以循环方式获取数据

Answer 1

我不明白你的问题！

请您改写它。

但是如果您想在一个请求中获取许多数据，则可以执行此操作=>

 export default {
  async asyncData ({ params }) {
   let users  = await axios.get(`https://api/users/`)
   let friends  = await axios.get(`https://my-api/friends`)
   return { 
        users: users.data
        friends: friends.data
     }
 }
}

根据文档https://nuxtjs.org/guide/async-data

谢谢！

Answer 2

免责声明：没有PUG或Cofeescript：）

您可以使组件动态化吗？内页/创建一个名为_repo.vue

的页面

现在，此回购组件将在$route.params.repo中具有一个属性。

所以您的asyncData看起来像：

asyncData({route}) {
   const data = await axios `https://api.github.com/repos/username/${route.params.repo}`

  return data
}

应该可以。

Answer 3

asyncData只是让我感到困惑，所以我最终在错误的地方，试图解决不必要的问题，我现在才意识到-这完全不适合我的目的，所以我用朴素的旧式{ {1}}函数：

created

谢谢大家！ ^ _ ^

在Nuxt.js组件中获取异步数据

添加＃3：最终推送！

3 个答案: