# 🏅 Day 5 - 使用指令建立 Composables
## 今日學習目標

- 學習使用指令建立 Composables
- 學習透過 Auto Imports 使用 Composables

## 建立 Composables

可以使用 `npx nuxi add composable composable名稱` 指令建立 Composable。在檔案目錄中會新建立放置組合函數的 composables 資料夾，例如輸入指令 `npx nuxi add composable useCounter` 會建立 composables/useCounter.ts 並生成預設格式 ( 如下圖 )

### 在 composable 中使用 Vue API

因為 Nuxt3 會自動導入 ( Auto Imports ) Vue API，所以使用 `ref(`) 、 `reactive()` 、生命週期等功能就不需要另外導入，直接調用即可。

// composables/useCounter.ts
// import { ref } from 'vue';  <----- 因為有 Auto Imports ，所以不用 import ref 

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  function decrement() {
    count.value--;
  }

  return {
    count,
    increment,
    decrement
  };
}

## 使用 Composables

可以直接在 .js、.ts 和 .vue 中自動導入組合函數 :

## 新增其他具有 Auto Imports 功能的 Composable

可以在 nuxt.config.ts 加入 imports.dirs 屬性，填入資料夾名稱。原本 ~/composables 和 ~/utils 目錄預設的 Auto Imports 不會被覆寫

export default defineNuxtConfig({
  "imports": {
     "dirs": ['stores']
  }
})

官方文件 : https://nuxt.com.cn/docs/api/nuxt-config#imports

<br>

> 今日學習的[範例 Code - 資料夾: day5-composable](https://github.com/hexschool/nuxt-daily-tasks-2024)

## 題目
請 fork 這一份 [模板](https://github.com/jasonlu0525/nuxt3-live-question/tree/day5-composable)，完成以下條件 :

- 在 pages/index.vue 使用 ES6 `fetch` 或是 `axios` 串接前台 [最新消息 API ( GET )](https://nuxr3.zeabur.app/swagger/#/Home%2FNews%20-%20%E6%9C%80%E6%96%B0%E6%B6%88%E6%81%AF) ，將資料寫入 `newsList` 並且切換 Loading 元件開啟、關閉的狀態。
- 將 `newsList` 資料在 <NewsCard /> 以 `v-for` 渲染卡片，並將 `props` 傳入<NewsCard /> 元件
- 將資料和 API 的方法移至 composables/useHome.js ，改成使用 composable 引入方法與資料


## 回報流程

將答案上傳至 GitHub 並複製 GitHub repo 連結貼至底下回報就算完成了喔 !
解答位置請參考下圖（需打開程式碼的部分觀看）


<!--

解答 : https://github.com/jasonlu0525/nuxt3-live-answer/tree/day5-composable

-->

回報區
---
| # | Discord | Github / 答案 |
| --- | ----- | ----- |
| 1 | LinaChen |[Github](https://github.com/Lina-SHU/nuxt3-live-question)|
| 2 | kevinhes |[Github](https://github.com/kevinhes/nuxt-daily-mission/tree/day5)|
| 3 | 眼睛 |[Github](https://github.com/Thrizzacode/nuxt3-live-question/tree/day5-composable)|
| 4 | Steven |[Github](https://github.com/y7516552/day5-composable.git)|
| 5 | NeiL |[Github](https://github.com/Neil10241126/nuxt-demo/tree/day5-composable)|
| 6 | Rocky |[Github](https://github.com/WuRocky/day5-composable)|
| 7 | 小木馬 |[Github](https://github.com/wern0531/Nuxt-test-day5)|
| 8 | MY |[Github](https://github.com/ahmomoz/nuxt3-live-question/tree/day5-composable-hw)|
| 9 | dragon |[Github](https://github.com/peterlife0617/2024-nuxt-training-homework01/tree/feature/day05)|
| 10 | Ming |[Github](https://github.com/ming77712/2024-nuxt3-daily05)|
| 11 | 松鼠 |[Github](https://github.com/meishinro/dailyMissionFive)|
| 12 | stan |[Github](https://github.com/haoxiang16/nuxt3-live-question/tree/day5-composable)|
| 13 | Ariel |[Github](https://github.com/Ariel0508/nuxtHw/tree/day5)|
| 14 | Tough life | [GitHub](https://github.com/hakuei0115/Nuxt_testing) |
| 15 | Jim Lin | [GitHub](https://github.com/junhoulin/Nuxt3-hw-day5) |
| 16 | Eden |[Github](https://github.com/1denx/NuxtDailyHw/tree/feature/day5-composable)|
| 17 | hannahTW |[Github](https://github.com/hangineer/nuxt3-live-question/tree/day5-composable)|
| 18 | 樂樂 | [GitHub](https://github.com/PinyiW0/Day5/tree/main) |
| 19 | 藍 | [GitHub](https://github.com/lelialan/Nuxt-composable-practice) |
| 20 | wei_Rio | [GitHub](https://github.com/wei-1539/nuxtDailyHomeWork) |
| 21 | runweiting | [GitHub](https://github.com/runweiting/2024-NUXT-Task/tree/day5) |
| 22 | hsin yu | [GitHub](https://github.com/dogwantfly/nuxt3-daily-task-live-question/commit/dcf8ee666a8d61836ac2106ff54b7a085f09ddd1) |
| 23 | tanuki狸 | [GitHub](https://github.com/tanukili/Nuxt-2024-week01-2/tree/day5-composable) |
| 24 | barry1104 | [GitHub](https://github.com/barrychen1104/nuxt3-live-question/tree/day5-composable) |
| 25 | 阿榮 | [GitHub](https://github.com/Peg-L/hex-nuxt3-project/tree/feat/day5) |
|26|好了啦|[GitHub](https://github.com/ZhangZJ0906/nuxt-live)|
| 27 | Fabio20 | [GitHub](https://github.com/fabio7621/nuxt3-live-question-d2/tree/nuxt3-live-day5) |
| 28 | 阿塔 | [GitHub](https://github.com/QuantumParrot/2024-Hexschool-Nuxt-Camp-Daily-Task) |
| 29 | 小蹦 | [GitHub](https://github.com/lgk559/hex-Nuxt3/tree/day5_addComposables) |
| 30 | YI | [GitHub](https://github.com/sming0305/NUXT-learn) |
| 31 | Nielsen | [GitHub](https://github.com/asz8621/nuxt3-daily-task/tree/day5-composable) |
| 32 | lidelin | [GitHub](https://github.com/Lide/nuxt3-live-question/tree/day5-composable) |
| 33 | Johnson | [GitHub](https://github.com/tttom3669/2024_hex_nuxt_daily/tree/day5-composable) |
| 33 | bb | [GitHub](https://github.com/wicebing/nuxt3-live-question/tree/day5-composable) |

<!-- 快速複製
| --- | ----- | [GitHub]() |
-->