---
# System prepended metadata

title: "\U0001F3C5 Day 27 - Pinia - 將 store 內資料渲染到畫面上"
tags: [Vue 直播班 - 2023 冬季班]

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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」

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

## 回報流程

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

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

<!-- 解答：  
https://codepen.io/hexschool/pen/dyjWyMa

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




回報區
---


|     Discord     |                                CodePen / 答案                                |
|:---------------:|:----------------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/oNVexQd?editors=1010) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/oNVexRM?editors=1011) | 
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/LYajZyM) | 
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/YzgxWGM) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/QWoMEjE?editors=1010) | 
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/oNVeLeV) | 
| chuchu | [CodePen](https://codepen.io/Wpypy/pen/WNmExJp?editors=1111) | 
| Ryann | [CodePen](https://codepen.io/csw8524/pen/rNRzMoB) | 
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/WNmEGMK?editors=1011) | 
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/mdoMOwj?editors=1010) |
| Pikachu | [CodePen](https://codepen.io/_pikachu_/pen/mdoMONo) |
| Moreene |[CodePen](https://codepen.io/Moreene/pen/mdoMRve)|
| Chia Pin |[CodePen](https://codepen.io/joker-cat/pen/qBvXrva)|
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/JjzyKEa) | 
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/LYajLOq) | 
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/oNVezzX?editors=1010) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/bGZrRjB?editors=1011) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/zYbddZQ?editors=1010) | 
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/WNmEZdV?editors=1011) | 
| PayRoom |[CodePen](https://codepen.io/water38198/pen/YzgxEyd)
| MY | [CodePen](https://codepen.io/ahmomoz/pen/MWxvEbY) | 
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/yLwoPqP) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/jOJLYxv) | 
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/ExMvQYP) | 
|Wei_Rio|[CodePen](https://codepen.io/wei_wu/pen/MWxvVyp?editors=1010)|
| Ting |[CodePen](https://codepen.io/liara/pen/OJqjvbJ) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/xxBLjmw?editors=1010) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/ExMvgQx) | 
| Jim | [CodePen](https://codepen.io/asiahedh-the-encoder/pen/bGZrZxw?editors=1010) | 
| RayRay | [CodePen](https://codepen.io/CityRay/pen/LYajvLE) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/qBvXzaK?editors=0010) 
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/MWxvMmm?editors=1010) | 
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/VwRzJYG) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/VwRzORd) | 
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/VwRMZOd?editors=1111) | 
| KUN. | [CodePen](https://codepen.io/barry91205/pen/WNmZNpr) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/abMLzxz) |
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/bGZoeeG?editors=1010) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/gOEGwQR) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/rNRGjMw) | 
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/NWJadGW) | 
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/bGZoYyw) |
| PoWei#8484 | [CodePen](https://codepen.io/Po-Wei-Lai/pen/yLwzppq) |
| dora | [CodePen](https://codepen.io/dorayu/pen/ZEPXrWd?editors=1010) | 
| PoRay | [CodePen](https://codepen.io/raycheng/pen/vYPejog) | 
| peggy | [CodePen](https://codepen.io/peggylai/pen/RwdLYvo?editors=1010) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/KKEXGWE) | 
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/OJqxxXZ) | 
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/gOEGZaa) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/wvOPMKW) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/eYXexrq?editors=1010) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/ZEPvzXZ?editors=1011) | 
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/abMEdVR) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/xxBprKO?editors=1011) |
|Yang|[Codepen](https://codepen.io/Yang-J/pen/MWxrqLQ)|
|Iris|[Codepen](https://codepen.io/iris831206/pen/WNmdaxX?editors=1111)|
|macihuang|[Codepen](https://codepen.io/macy1215/pen/qBvpeOY)|
| 依依| [CodePen](https://codepen.io/Rita-Yang/pen/dyrdrRv?editors=1011) | 
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/WNmMBZZ?editors=1111) | 
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/MWxVpdo) | 
| shuuu | [CodePen](https://codepen.io/jybvfzos-the-bashful/pen/yLwERaJ?editors=1011) | 
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/rNRQapq) | 
|yuling| [Coedpen](https://codepen.io/igzdflpu/pen/WNmWWNY?editors=1011)|
| Eden |[Codepen](https://codepen.io/iseden/pen/MWRwrBv)|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/ExJVWeQ) | 


<!-- 

| user | [CodePen]() | 

-->

