---
# System prepended metadata

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

---

---
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://i.imgur.com/vftL5i0.png)

<!-- 解答：  
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)|
