---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 Day 29 - Pinia - 取用跨元件 store 資料
在運用元件時會遇到元件間需要傳遞資料的情況，
使用 store 可以簡易取得跨元件的資料

### 取用其他 store 的資料
在取用其他 store 資料時，我們直接**執行 store**，並使用**解構**的方式取出 store 內資料

以下範例為：兩個 store，我們要在 cart store 中取得 food store 的 foodList 資料

// food store
const foodStore = defineStore('foodStore', {
  state: () => ({
    foodList: [
      {
        foodName: '原味蛋餅',
        price: 25,
        unit: '份'
      }
    ]
  })
})

// cart store
const cartStore = defineStore('cartStore', {
  state: () => ({
    cart: []
  }),
  getters: {
    getFoodList: () => {
      //  取出 foodList
      const { foodList } = foodStore();
      return foodList
    }
  }
})

> 觀看完整範例：https://codepen.io/hexschool/pen/qByPbMw?editors=1011

### 題目
利用此 [模板](https://codepen.io/hexschool/pen/jOpGMoY?editors=1111)（只需修改 `...` 的部分），在 cart store 取用 `foodList` 資料，並將 `cart`、`foodList` 整合成一個 `cartList` 陣列，陣列中每一筆為一個物件，物件內有 foodId、qty、itemTotal 三個屬性：

cartList: [
  {
    foodId: 產品的 ID,
    qty: 數量,
    itemTotal: 該產品總額（該產品金額＊數量）
  },
  ...
]

當點擊 ＋ 按鈕時，該品項會被新增進 cartList 中，並在畫面呈現 cartList 資料

> 操作示意

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

## 回報流程

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


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

額外挑戰：
https://codepen.io/jmimiding4104/pen/jOJPWQN?editors=1011
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/gOEGGWe?editors=0011) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/ExMwbaX) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/yLwzzxy?editors=1011) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/xxBXXNr) |
| chuchu | [CodePen](https://codepen.io/Wpypy/pen/abMLVEY?editors=1011) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/dyrVZVg) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/OJqxOXe?editors=0011) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/jOJGYbL) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/NWJaXGp) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/wvOrpVm?editors=1011) |
| PoWei#8484 | [CodePen](https://codepen.io/Po-Wei-Lai/pen/ExMwQqm?editors=1012) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/BabwJJZ) |
|wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/bGZovyw?editors=0011)|
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/GReMdRJ) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/jOJGKrX?editors=1011) |
| Ann Chou | [CodePen](https://codepen.io/annchou_illu/pen/WNmZyEL) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/PoLJdQW) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/qBvPMYW?editors=0011) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/ExMwedB) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/WNmZggM) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/dyrVQbd) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/eYXGLXX?editors=0010) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/eYXGbzK?editors=1111)|
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/BabwGGN)|
| MY | [CodePen](https://codepen.io/ahmomoz/pen/bGZoxLr?editors=1010) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/wvOrRJJ) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/eYXGbZr) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/dyrVLpx) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/XWGzWNM?editors=1011) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/WNmZdRE?editors=0011) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/LYaOVRZ?editors=1011) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/KKEXyPp?editors=1011) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/mdoBKJM?editors=0011) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/KKEyrLg) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/KKEyJYL) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/bGZabmx?editors=1011) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/wvOpMKa?editors=0011) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/zYbpqoQ) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/YzgYxPd?editors=1011) |
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/oNVpMxW?editors=1011) |
|Yang|[Codepen](https://codepen.io/Yang-J/pen/jOJYeKv)|
| PayRoom |[CodePen](https://codepen.io/water38198/pen/vYPpqEJ)
| 熊大 | [CodePen](https://codepen.io/asiating/pen/eYXeNZa) |
| macihuang | [CodePen](https://codepen.io/macy1215/pen/RwdQNEb) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/xxBYEpz?editors=0011) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/ExMQGyv?editors=1111) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/yLwpKrJ) |
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/vYPdwwy?editors=1011) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/wvOmvPE?editors=0011) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/oNVqWzO) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/WNmzRPm) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/yLwROEy) |
| Pikachu | [CodePen](https://codepen.io/_pikachu_/pen/poYQgyW)
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/rNRoVXV) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/YzgbZQE) |
| yuan! | [CodePen](https://codepen.io/townyuan/pen/bGJVqXp) |
| Edne |[Codepen](https://codepen.io/iseden/pen/gOypodO)|

<!--

| user | [CodePen]() |

-->