---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 27 - Pinia - 將 store 內資料渲染到畫面上
要讓元件可以取用 store 內的資料，我們需運用到 mapState() 方法，
若要對該資料進行一些計算的話，可以再搭配 getters
### 1. mapState()
我們只有單純要取用資料，所以會在元件中的 computed 中使用
```javascript=
// 取用方法
const { createPinia, defineStore, mapState } = Pinia
// 我們定義ㄉ store
const exampleStore = defineStore('exampleStoreId', {
state: () => {
return {
message: 'Pinia Pinia Pinia！'
}
}
})
// Vue app
const app = Vue.createApp({})
// 元件
app.component('WelcomeMessage', {
template: `<p>{{ message }}</p>`,
computed: {
// 使用 ... 展開的方式
// mapState() 第一個參數是我們要取用的 store，第二個參數是我們要取用的資料
...mapState(exampleStore, ['message'])
}
})
const pinia = createPinia();
app.use(pinia);
app.mount('#app');
```
> 觀看完整範例：https://codepen.io/hexschool/pen/eYjvRgM?editors=1011
### 2. 搭配 getters
```javascript=
// 取用方法
const { createPinia, defineStore, mapState } = Pinia
// 我們定義ㄉ store
const exampleStore = defineStore('exampleStoreId', {
state: () => {
return {
message: 'Pinia Pinia Pinia！'
}
},
getters: {
// 將 state 內資料使用解構方式帶入
printMessage: ({ message }) => {
// 可以對資料進行操作
return 'msg: ' + message
}
}
})
// Vue app
const app = Vue.createApp({})
// 元件
app.component('WelcomeMessage', {
template: `<p>{{ printMessage }}</p>`,
computed: {
// 這邊第二個參數是要使用 getters 內的函式名稱
...mapState(exampleStore, ['printMessage'])
}
})
const pinia = createPinia();
app.use(pinia);
app.mount('#app');
```
> 觀看完整範例：https://codepen.io/hexschool/pen/LYBWjYV?editors=1011
### 題目
請嘗試修改此[模板](https://codepen.io/hexschool/pen/XWBpBWY)（只能調整 `...` 的部分），讓畫面可以呈現出「總科目數：3」
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
https://codepen.io/hexschool/pen/dyjWyMa
-->
回報區
---
| Discord | CodePen / 答案 |
|:---------------:|:----------------------------------------------------------------------------:|
| 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/rNrZqKN) |
| Wendy3#5615 | [CodePen](https://codepen.io/wendy03/pen/YzjOJLQ) |
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/GRBXYdy?editors=1010) |
| yuyu#6310 | [codepen](https://codepen.io/yuyu0905/pen/VwBGVLy?editors=1010) |
| AuroraC#6539 | [codepen](https://codepen.io/AuroraC/pen/ExpeOYg?editors=1111) |
| JillLee#0809 | [CodePen](https://codepen.io/chi-ling-lee/pen/YzjORQv?editors=1010) |
| JackC#0411 | [CodePen](https://codepen.io/key0329/pen/gOjdQyV) |
| albee#9121 | [CodePen](https://codepen.io/albee-chang/pen/wvxERoW?editors=1010) |
| 無名#6427 | [CodePen](https://codepen.io/Nomoney/pen/mdjjKxx) |
| azami#5986 | [Codepen](https://codepen.io/azami/pen/BaPOvxQ) |
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/oNMPJav) |
| mandylai#4055 | [CodePen](https://codepen.io/mandy-lai-2/pen/vYazvvN?editors=1011) |
| Hazel.#6020 | [CodePen](https://codepen.io/Hazelhsieh/pen/jOpvXPy?editors=1010) |
| 米米#1824 | [CodePen](https://codepen.io/Jameshsu0407/pen/RwBYvWo?editors=1010) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/PoBdVGK?editors=1011) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/YzjOBKq) |
| 黑白兔#0684 | [CodePen](https://codepen.io/johnny329/pen/poZOGVY) |
| Alex#9978 | [CodePen](https://codepen.io/datsxzqg-the-selector/pen/xxJaMqb?editors=1111) |
| 心幻羽#0056 | [CodePen](https://codepen.io/linglingsyu/pen/eYjLQqG) |
| 泊岸#3466 | [CodePen](https://codepen.io/qoq77416416/pen/bGjxzKx?editors=1010) |
| Potatolee#7749 | [CodePen](https://codepen.io/potatoleee/pen/WNKgPEK) |
| Benson#6763 | [Codepen](https://codepen.io/kumashow/pen/oNMPVMy) |
| SASIMI#5099 | [Codepen](https://codepen.io/sashimi1327/pen/OJwoqrK) |
| 楊苡安#2752 | [Codepen](https://codepen.io/yi-an-yang/pen/ZEjMZyr) |
| Wendy77#8049 | [Codepen](https://codepen.io/Wendy__/pen/poZOGKB) |
| RainLiao#2616 | [Codepen](https://codepen.io/billpop741/pen/poZOqpd) |
| masterYan#2480 | [Codepen](https://codepen.io/htzwgoqt-the-looper/pen/xxJaogr?editors=1111) |
| kenki100#0068 | [Codepen](https://codepen.io/ken100/pen/qByMQXp) |
| Amberhh#2465 | [codepen](https://codepen.io/Amberhh/pen/BaPOGNv) |
| hannahTW#2224 | [codepen](https://codepen.io/hangineer/pen/wvxYKpb?editors=1011) |
| Tuhacrt#0008 | [codepen](https://codepen.io/Tuhacrt/pen/abjRZoZ) |
| yoyo123456#0577 | [codepen](https://codepen.io/hungyoyo/pen/poZxEXL?editors=1010) |
| 圈圈#4060 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/bGjmgbQ) |
| YI#0863 | [Codepen](https://codepen.io/YI0305/pen/JjBmEGW?editors=1010) |
| DIO大人#4776 | [Codepen](https://codepen.io/oscar-2283/pen/NWBOdLK) |
| 阿鑫#4346 | [CodePen](https://codepen.io/Neil1024/pen/wvxYJMa?editors=0011) |
| 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/bGjmBwa) |
| Cheryl#4007 | [Codepen](https://codepen.io/Cheryl-Hsu/pen/PoByEZY?editors=0010) |
| christina#6185 | [codepen](https://codepen.io/chrisc0210/pen/eYjPbaK) |
| 阿榮#8277|[CodePen](https://codepen.io/codeitaday/pen/dyjgrqm)|
| 法希娜#3206 | [Codepen](https://codepen.io/yiiserpf-the-encoder/pen/QWBZoJW) |
| LinaChen#1796|[CodePen](https://codepen.io/LinaChen/pen/QWBZoRb)|
|aki|[stackblitz](https://stackblitz.com/edit/github-twn6l7?file=src/App.vue)|
|Bassjim#0118|[stackblitz](https://codepen.io/unrtxbaq/pen/BaPqgLO?editors=1111)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/XWByKyN?editors=1010)|
|ABOOS#6276|[Codepen](https://codepen.io/guhungyin/pen/XWByjgz)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/XWBypLM?editors=1010)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/BaPGwMJ?editors=1011)|
|Kimi #9564|[Codepen](https://codepen.io/kimihu91/pen/WNKgYMb)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/rNrQbKG?editors=1010)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/XWBorYO?editors=1010)|
|CofCat#9226|[Codepen](https://codepen.io/cofcat456/pen/MWBZOVN?editors=1010)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/mdjaoGq)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/xxJmNEa)|
|helena#8461|[Codepen](https://codepen.io/helena27/pen/zYLygWz?editors=1111)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/ExprYwe)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/MWBLWaz)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/ZEjwerO?editors=1010)|
|Knock59487#9114|[CodePen](https://codepen.io/Zack88/pen/RwBvMOL)|
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/eYjXdOq)|
|大衛#4869|[CodePen](https://codepen.io/exnsrpjc/pen/yLqwxYw?editors=1010)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[CodePen](https://codepen.io/sho666/pen/QWBRpBZ?editors=1011)|
|hungya#0773|[CodePen](https://codepen.io/hungya777/pen/poZXjKw?editors=1010)|
|出事了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/vYaqKxP?editors=1010)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/qByerbg?editors=0010)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/BaOBaJe)
|Yuna Huang#2692|[CodePen](https://codepen.io/Yuna1002/pen/XWPWQpg?editors=1010)
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/bGxdobd?editors=1011)|
|yoyo#1003|[CodePen](https://codepen.io/pen/LYJZGQV)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/WNgxZLV)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/poOeXRQ)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/LYBMJKgB)|
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/KKGVWYm)|
Sign in with Wallet
Connect another wallet