---
# System prepended metadata

title: "\U0001F3C5 Day 30 - Pinia 整合應用"
tags: [Vue 直播班 - 2023 冬季班]

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 30 - Pinia 整合應用

嘗試運用前幾天學到的方法完成下方題目需求

### 題目
利用此 [模板](https://codepen.io/hexschool/pen/VwBMOaY?editors=1010)（已有提供部分元件、store 資訊，只需調整 `...` 的部分），
當選擇上方 select 時會出現對應班級的學員

![](https://i.imgur.com/DccZH8Q.gif)
> 操作示意

#### 額外挑戰
完成上述題目後，嘗試將 JS 區塊改為使用 Composition API 撰寫

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：  
https://codepen.io/hexschool/pen/KKBXGme?editors=1011

額外挑戰：
https://codepen.io/jmimiding4104/pen/OJqRdXp
-->




回報區
---


|   Discord    |                    CodePen / 答案                      |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/MWxEEza?editors=0010) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/bGZYdbL) |
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/XWGzbXv) |
| chu | [CodePen](https://codepen.io/Wpypy/pen/eYXeNVY?editors=1011) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/abMVOBO) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/eYXeNqZ?editors=1010) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/zYbPvYo) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/dyrZYMm) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/QWoObVP) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/xxBPVZb) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/PoLOqZO) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/rNRYVxE?editors=1011) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/YzgEWoM) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/jOJaWMw?editors=1011) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/YzgEXbe) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/XWGzgbj) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/jOJaLEy?editors=1111) |
| PoWei#8484 | [CodePen](https://codepen.io/Po-Wei-Lai/pen/gOEXzor?editors=0010) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/dyrZKYG?editors=0010) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/XWGzorV) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/NWJwJxm) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/rNRYOQG?editors=1011)|
| Rock | [CodePen](https://codepen.io/xiu43317/pen/PoLOvmJ) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/rNRYXoq) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/gOEoYEe?editors=1010) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/rNRpajJ?editors=1011) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/MWxOpdP?editors=0010) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/rNRpxdK?editors=1011) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/QWoagWo) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/eYXyepm?editors=1010) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/WNmdzoW?editors=0010) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/abMEgLB?editors=1010) |
| PayRoom |[CodePen](https://codepen.io/water38198/pen/dyrJBzV)
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/NWJXQGP?editors=1010) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/qBvxbKQ) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/jOJZVra?editors=1010) |
| Fabio | [CodePen](https://codepen.io/fabio7621/pen/NWJyMyx?editors=1010) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/NWJyemR?editors=1010) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/vYPdbpL) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/PoLQrmR) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/BabrvMB) 
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/oNVyjoX) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/bGZmXdB) |
| Pikachu | [CodePen](https://codepen.io/_pikachu_/pen/qBvQXmv) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/MWxZayY?editors=1111) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/MWxQVWx) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/yLrYwqW) |
| Eden |[Codepen](https://codepen.io/iseden/pen/KKYpZeW)|
| PoRay | [CodePen](https://codepen.io/raycheng/pen/MWRjrMN?editors=1011) |
<!-- 

| user | [CodePen]() |

-->
