Блог

 <template>
  <div id="post">
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: ''
    }
  },
  async asyncData({$axios}) {
    const res = await $axios.get('/v1/posts')
    .catch( error => {
      console.log("response error", error)
      return false
    })
    return {
      data: res
    }
  },
}
</script>
 

Сначала я попытался получить данные с помощью приведенного выше кода, он работал в pages/ post.vue, но не в components/ post.vue.
Затем я понял, что не могу использовать asyncData в компонентах nuxt, и изменил код следующим образом.

 <template>
  <div id="post">
    <p>{{ data }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: ''
    }
  },
  mounted () {
    this.asyncData()
  },
  asyncData() {
    await axios.get('/v1/posts')
    .then(res => {
      this.data = res.data
    })
  },
}
</script>
 

Затем я получил синтаксическую ошибку «Неожиданное зарезервированное слово ‘await'».
Как я могу получить данные через api в компонентах Nuxt?

===================================

Я прочитал https://nuxtjs.org/docs/features/data-fetching#accessing-the-fetch-state и изменил код, как показано ниже.

 <script>
export default {
  data () {
    return {
      data: ''
    }
  },
  async fetch() {
    this.data = await fetch('/v1/posts')
    .then(res => res.json())
  },
}
</script>
 

И теперь я получаю еще одну ошибку «Ошибка в fetch(): SyntaxError: неожиданный токен < в JSON в позиции 0».

Этот код сработал.

 <script>
export default {
  data () {
    return {
      data: '',
    }
  },
  async fetch() {
    const res = await this.$axios.get('/v1/posts')
    this.data = res.data
  },
}
</script>
 

Рад, что нашел решение вашей проблемы.

Вы даже можете использовать this.$axios.$get напрямую, если не хотите .data потом писать.