DAY5：航向Nuxt.js的寶藏 - 資料串接與API利用

開始我們的航程

讓我們先來探索如何發送HTTP請求，獲取我們需要的資料。

// 使用 axios 套件發送 GET 請求
const response = await this.$axios.$get('https://api.example.com/data')

航行的工具 - Axios

為了在Nuxt.js中輕鬆地進行資料串接，我們可以倚靠一位強大的工具 - Axios。這位工具就像是我們的忠實水手，幫助我們與遠方的API通信。

// 安裝 Axios
yarn add axios
或者是
npm i axios

發現寶藏 - 資料展示

當我們獲得了寶貴的資料，接下來就是將其展示給世界看。這就像是我們在島上發現寶藏後，將其展示在陽光下，與夥伴分享。

<!-- 在 Vue 組件中展示資料 -->
<template>
  <div>
    <h1>寶藏清單</h1>
    <ul>
      <li v-for="treasure in treasures" :key="treasure.id">{{ treasure.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  async asyncData({ $axios }) {
    const treasures = await $axios.$get('https://api.example.com/treasures')
    return { treasures }
  }
}
</script>

分享寶藏 - 社群精神

最後，我們不要忘記分享我們的寶藏，這就是海盜們的社群精神。將你的網站分享給世界，讓更多人受益。

<!-- 分享按鈕，讓更多人發現寶藏 -->
<div class="share-buttons">
  <a href="https://twitter.com/share?url=https://yourwebsite.com" target="_blank">
    <img src="/twitter-icon.png" alt="分享到 Twitter">
  </a>
  <a href="https://www.facebook.com/sharer/sharer.php?u=https://yourwebsite.com" target="_blank">
    <img src="/facebook-icon.png" alt="分享到 Facebook">
  </a>
</div>