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

Posted 2021-04-16

代码片段用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：最后推！

所以现在我需要的是 - 以asyncData的方式将它传递给props slots

asyncData: ({ params }) ->
    axios.defaults.baseURL = 'https://api.github.com/repos/username'
    repo = 'repo22'
    res = await axios('/' + repo)
    {
      stargazers: res.data.stargazers_count
      description: res.data.description
      url: res.data.html_url
    }
...

      h1 {{description}}

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

答案

我不明白你的问题！

请你重新制定它。

但如果你想在一个请求中获得许多数据，你可以这样做=>

 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

谢谢 ！

另一答案

免责声明：没有PUG也没有Coffeescript :)

你能让你的组件动态吗？在页面内/创建一个名为_repo.vue的页面

现在这个repo组件将在$route.params.repo中拥有一个属性。

所以你的asyncData看起来像：

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

  return data
}

这应该工作。

另一答案

asyncData只是困惑我，所以我最终在错误的地方，试图解决不必要的问题，我现在意识到 - 它完全不适合我的目的，所以我用普通的旧vue'ish created函数重做它：

<template lang="pug">
  .div(
    :created="axiSync"
  )
    h3 asyComp2
    h1 {{statusText}}
    h1 {{status}}
    h3 {{stargazersCount}}
    h3 {{description}}
    h3 {{htmlUrl}}
    h3 {{ratelimit}}
</template>
<script lang="coffee">
import axios from 'axios'
export default
  props: ['repo']
  data: ->
    statusText: ''
    status: ''
    stargazersCount: ''
    description: ''
    htmlUrl: ''
    ratelimit: ''
    url: 'https://api.github.com/repos/userName/'
  methods:
    axiSync: ->
      response = await axios.get(@url + @repo)
      @statusText = response.statusText
      @status = response.status
      @stargazersCount = response.data.stargazers_count
      @description = response.data.description
      @htmlUrl = response.data.html_url
      @ratelimit = response.headers['x-ratelimit-remaining']
 </script>

...

asyComp2(
      repo = 'niceAndDandy'
    )

谢谢大家！ ^ _ ^