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

Question

代码 sn-ps 是用 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 就asyncData而言

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}}

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

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的页面

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

所以你的 asyncData 看起来像：

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

  return data
}

应该可以的。

Answer 3

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'
    )

谢谢大家！ ^_^