---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 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 資料

> 操作示意

## 回報流程

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


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

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------:|
| Wendy3#5615 |[Codepen](https://codepen.io/wendy03/pen/GRBwPBV) |
| 楊苡安#2752 |[Codepen](https://codepen.io/yi-an-yang/pen/MWBzZzv?editors=1111) |
| 冬天#5215 |[Codepen](https://codepen.io/winter_/pen/zYLMyJR)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/xxJQmvy?editors=1011)|
| 阿鑫#4346 |[CodePen](https://codepen.io/Neil1024/pen/poZQGdV?editors=0011)|
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/poZQGea?editors=1011)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/poZQGvW?editors=1011)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/jOpQdwY?editors=1010)
|泊岸#3466|[CodePen](https://codepen.io/qoq77416416/pen/NWBEeZb?editors=1011)
|Wendy77#8049|[Codepen](https://codepen.io/Wendy__/pen/dyjQrGO)|
|mandylai#4055|[Codepen](https://codepen.io/mandy-lai-2/pen/zYLMbvY)|
|無名#6427|[Codepen](https://codepen.io/Nomoney/pen/mdjjKxx)|
|JackC#0411|[Codepen](https://codepen.io/key0329/pen/jOpQJZR)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/LYBXvym)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/xxJQNVm?editors=1010)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/xxJQeea)|
|Potatolee#7749|[Codepen](https://codepen.io/potatoleee/pen/yLqRrxz?editors=1011)|
|法希娜#3206|[Codepen](https://codepen.io/yiiserpf-the-encoder/pen/PoBxvvK?editors=1111)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/RwBqdrg)|
|Jil了Lee#0809|[CodePen](https://codepen.io/chi-ling-lee/pen/JjBegdr?editors=1011)|
|Amberhh#2465|[Codepen](https://codepen.io/Amberhh/pen/NWBEovv)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/gOjZOvz?editors=1011)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/RwBENvz?editors=0011)|
|Alex#9978|[Codepen](https://codepen.io/datsxzqg-the-selector/pen/mdjabNW?editors=1111)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/PoBXwJr)|
| albee#9121|[CodePen](https://codepen.io/albee-chang/pen/bGjOpPa)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/BaPGemW)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/eYjbzjm?editors=1011)|
|DIO大人#4776|[Codepen](https://codepen.io/oscar-2283/pen/gOjQyNb)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/bGjOBMR?editors=1011)|
|柚子 #3958|[Codepen](https://codepen.io/as6625998/pen/BaPvWRg?editors=0011)|
|hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/XWBoMRR?editors=0010)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/JjBwYMR)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/GRBPmer?editors=0011)|
|CofCat#9226|[Codepen](https://codepen.io/cofcat456/pen/poZqdqM?editors=1111)|
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/ZEjVMje) |
|aki|[stackblitz](https://stackblitz.com/edit/github-twn6l7?file=src/stores/cartStore.ts)|
|rRena#62409|[Codepen]([/ppwsUP4ORwWt7ddSB6yw5w](https://codepen.io/aureate0116/pen/JjBwqNw))|
|米米#1824|[Codepen](https://codepen.io/Jameshsu0407/pen/xxJmNjM?editors=1011)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/XWBOjqM?editors=1111)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/qBygoJZ?editors=1111)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/MWBLGjY)|
|Kimi#9564|[Codepen](https://codepen.io/kimihu91/pen/WNKgYMb)|
|ABOOS#6276|[Codepen](https://codepen.io/guhungyin/pen/rNrPrKE?editors=0011)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/LYBaNdX?editors=1111)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/YzjdRpp)|
|yoyo123456#0577|[Codepen](https://codepen.io/hungyoyo/pen/PoBLmBw?editors=0011)|
|大衛#4869|[Codepen](https://codepen.io/exnsrpjc/pen/LYBaJey?editors=1011)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/bGjZmXw?editors=0011)|
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/NWBJZoy?editors=1011)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/gOjyXab?editors=1011)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/XWBLrEj?editors=0010)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/zYLVrjV?editors=1011)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/BaPgLNp?editors=1011)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/vYaqrMr) |
| helen#8641 | [CodePen](https://codepen.io/helena27/pen/jOpjpGr?editors=1010) |
| GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922 | [CodePen](https://codepen.io/sho666/pen/MWBNYyQ?editors=1010) |
| 阿蘇#8531 | [CodePen](https://codepen.io/susu3131/pen/xxJvqoK?editors=1011) |
| Austyn#0949 | [CodePen](https://codepen.io/fish90547/pen/vYzBEaE?editors=1011) |
| yoyo#1003 | [CodePen](https://codepen.io/pen/PodzXKW?editors=1111) |
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/gOjqvja)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/RwerZae)|