Как вытащить данные в контексте для страницы в nuxt js?

Question

[Дядька Дьякон]

Есть такой запрос к yuoutube api

<script>
  import axios from 'axios'
  export default {
    asyncData () {
      return axios.get(`https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=50&key=AIzaSyBJy7U8AOb-7b7GH1NXW1vCXItADM`)
        .then((res) => {
          // return {videos: res.data.items}
          console.log(res.data)
        })
    }
  }
</script>

После запроса я отрендерил превьюшки видео и вывел на главную таким образом

<template>
<div class="container">
  <div class="list-items">
    <VideoPreview
      v-for = "video in videos"
      :key = "video.id"
      :id = "video.id"
      :title = "video.snippet.title"
      :thumbnailImage = "video.snippet.thumbnails.medium.url"
    />
  </div>
</div>
</template>

Вопрос заключается в том, как в контексте этого запроса мне вытаскивать данные для каждой страницы с видео?

Answer 1

[Дядька Дьякон]

Разобрался сам, нужно было просто прописать запрос в компоненте таким образом:

<script>
  import axios from 'axios'
  export default {
    asyncData ({ params }) {
      return axios.get(`https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${params.id}&key=AIzaSyBJy7U8AOzPm7b7CXItADM`)
        .then((res) => {
          // return {videos: res.data.items}
          console.log(res.data)
        })
    }
  }
</script>

И тогда по запросу будет приходить нужная информация