Получить асинхронные данные в компоненте Nuxt.js

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 все волшебство данных произойдет

---

add # 3: Final push!

так что теперь все, что мне нужно, - это передать его в подпорки \ слотыкак-то с точки зрения 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

Отказ от ответственности: нет 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 2

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

Спасибо всем!^ _ ^

Answer 3

Я не понимаю ваших вопросов!

пожалуйста, не могли бы вы переформулировать это.

, но если вы хотите получить много данных в одном запросе, вы можете сделать это =>

 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

Спасибо!