# 🏅Day16 - 使用 provide, inject 傳遞資料到通知元件

## provide, inject 介紹

在 Vue 中開發中大型應用時，provide 和 inject 是一對非常實用的 API，讓你可以在「祖先元件提供資料」給「後代元件接收資料」，不需要中間層層傳遞 props。這對於跨層級傳值或共享功能（像 toast、主題設定、使用者資料等）特別有用。

1. ```provide``` 是一個用來在「上層元件」註冊或「提供」某些資料或方法的功能。
2. ```inject``` 是一個用來在「下層元件」取得上層提供的資料或方法的功能。

例如以下範例：<iframe height="300" style="width: 100%;" scrolling="no" title="使用 provide, inject 傳遞資料到通知元件 - 範例" src="https://codepen.io/yen-kg/embed/VYvPqzJ?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/VYvPqzJ">
使用 provide, inject 傳遞資料到通知元件 - 範例</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

---
可以從上述的範例程式碼中觀察到第 18、19 行的地方有使用到 `provide`：

const notificationState = reactive({ message: '' });

provide('notificationState', notificationState);
provide('notify', (msg) => {
  notificationState.message = msg;
  setTimeout(() => {
    notificationState.message = '';
  }, 2000);
});

1. `provide('notificationState', notificationState)` 將一個響應式狀態物件「提供」出去，key 名叫 `notificationState`。
2. `provide('notify', (msg) => {...})` 將一個方法 notify 提供出去，讓子元件可以呼叫這個方法來發送通知。

接著可以使用 `inject` 的方式取得 notify 函式，點擊加入購物車後就呼叫 notify(...)，觸發通知文字變更。

// 商品元件裡 inject notify 函式
const notify = inject('notify');

// 通知元件裡 inject notificationState 物件
const state = inject('notificationState');

所以流程大致上會是這樣：
1. `product-item` 使用 `inject` 拿到方法 `notify`，用來設定通知訊息
2. `notification` 使用 `inject` 拿到狀態物件，顯示目前的訊息
3. 當通知訊息變更時，通知元件畫面自動更新，並且 2 秒後清空訊息使通知消失

## 題目
請複製此 [CodePen 模板](https://codepen.io/yen-kg/pen/gbagZEw?editors=1011)，並加上 `inject` 跟 `provide`：
* 請在 JavaScript 中第 6 行 `setup` 中加上 `inject`。
* 請在 JavaScript 中第 48 行加上 `provide`。
* 以上都完成後，點擊「加入購物車」按鈕可以觸發通知訊息。

## 回報流程

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


<!-- 解答：
https://codepen.io/yen-kg/pen/NPGdeOg?editors=1011
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------------:|:-------------------------------------------------------------------:|
|DaRon | [CodePen](https://codepen.io/daron0811/pen/ogjdowG) |
| RUDY| [CodePen](https://codepen.io/Rudy-crw/pen/vENjWWj?editors=1011) |
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/PwPeOyL?editors=1011) |
| dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/xbwjPVR?editors=1010) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/YPyLYBz) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/LEpmeqo?editors=1010) |
| Candace | [CodePen](https://codepen.io/Candace802/pen/wBKjmGQ?editors=0011) |
| ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/MYaGVwg?editors=1011)|
| Lin | [Codepen](https://codepen.io/Lin4611/pen/GgpdxMX?editors=1011)|
| yu005620 | [Codepen](https://codepen.io/yu-chin-chiang/pen/GgpddYJ?editors=1011)|
| Sam.S.T.Y | [Codepen](https://codepen.io/Sam-Yang-the-animator/pen/yyYjjrv?editors=1011)|
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/MYaGExd?editors=1011) |
| 阿昌 | [CodePen](https://codepen.io/ychleo102615/pen/NPGMOGv) |
| dean | [CodePen](https://codepen.io/ch933114/pen/OPyZYEx?editors=1011)
| Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/pvjVMLP?editors=1010) |
| 阿Kai | [CodePen](https://codepen.io/kaihuang3013/pen/dPYexBx?editors=1011) |
| Rexlin | [CodePen](https://codepen.io/Rexlin595/pen/GgpGKJZ?editors=0010) |
| Kai | [CodePen](https://codepen.io/beginneraboutlife116/pen/empKmgR) |
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/RNWyXgm) |
| wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/QwjxKKy) |
| David0799 | [CodePen](https://codepen.io/David0799/pen/MYaQKmq) |
| William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/WbQyZXd?editors=1011) |
| 白雪 | [CodePen](https://codepen.io/weiwei032835-the-styleful/pen/bNVKrKE) |
| Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/raOKGMZ) |
| 7lun| [CodePen](https://codepen.io/Duncanin/pen/PwPeOyL?editors=1011) |
| Eden | [Codepen](https://codepen.io/iseden/pen/wBKxKbN) |
| Clove_墨 | [Codepen](https://codepen.io/CloveTseng1026/pen/QwjBGKv?editors=0010) |
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/ByoPqeZ?editors=1011) |
| Clarence | [Codepen](https://codepen.io/Clarence-Lin/pen/KwdBGLR?editors=1010) |
| ScarT | [CodePen](https://codepen.io/Acadia/pen/GgpXjVa?editors=0010) |
| jimmy | [CodePen](https://codepen.io/JimmyMao/pen/ZYbqOOj?editors=1011) |
| 黛西 | [CodePen](https://codepen.io/ChiashengLin/pen/WbQagQg?editors=1011) |
| Chen | [CodePen](https://codepen.io/JGM-C/pen/ByoqqLg) |
| Toung | [CodePen](https://codepen.io/Toung/pen/JoYzaRe)
<!--

| user | [CodePen]() |

-->