---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 26 - Pinia - 建立 store

[Pinia](https://pinia.vuejs.org/zh/) 是一個狀態管理工具，可以讓我們方便管理及取用跨元件的資料狀態、方法。

### 載入 Pinia

<!-- Vue CDN -->
<script src="https://unpkg.com/vue@next"></script>

<!-- VueDemi，使用 Pinia 必要的相依套件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-demi/0.13.11/index.iife.js"></script>
<script>const I = VueDemi; const vueDemi = VueDemi;</script>

<!-- Pinia 網頁版，實戰中還是以 npm 為主，這是比較少見的使用方式 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pinia/2.0.28/pinia.iife.js"></script>

> 使用 CDN 的方式載入（需放在 `</body>` 前）
> 運用 Pinia CDN 需再載入相依套件 VueDemi
> （若用 npm 就不需要再額外載入）
>
> 載入後，可以在 JS 中使用 `console.log(Pinia)` 觀看是否有成功載入
> 若有成功印出表示有成功載入 Pinia

接下來，需創建 pinia 實例（需運用 `createPinia()` 方法），並運用 `app.use()` 讓我們在 Vue 的環境中使用 Pinia 的方法

const { createPinia } = Pinia;

const app = Vue.createApp({})

// 創建 pinia 實例
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

### 建立 store
我們透過建立 store 來存放要在頁面**共用的資料、方法**。
store 中有三個屬性：state、actions、getters
- state：可以將其想成 Options API 中的 data 屬性，用來存放資料
- actions：可以將其想成 Options API 中的 methods 屬性，用來撰寫方法
- getters：可以將其想成 Options API 中的 computed 屬性，可以取用 state 資料做一些計算

以下為建立 store 大致的結構

// 建立 store 需使用到 Pinia 中 defineStore() 方法
const { defineStore } = Pinia;

// 建立 store
// defineStore() 第一個參數為字串，是這個 store 的 id，可以隨意命名但需唯一（若有其他 store 需再另外命名不同名字）
const exampleStore = defineStore('exampleStoreId', {
  // 有三個屬性：state, actions, getters
    
  // state 為函式，可以使用箭頭函式，主要用來存放資料。
  // 可以將其想成 Options API 中的 data 屬性
  state: () => { 
    return {
      // 資料範例
      courses: ['國文', '英文', '數學'],
      allPassNum: 30,
      ...
    }
  },
  // actions 為物件，主要用來撰寫方法
  // 可以將其想成 Options API 中的 methods 屬性
  actions: {
    ...
  },
  // getters 為物件，讓元件可以取用 state 資料、做一些計算
  // 可以將其想成 Options API 中的 computed 屬性
  getters: {
    ...
  }
});

> store 有兩種撰寫方式：Option store、Setup Store
> 這邊一律都是使用 Option store 做範例與練習哦

### 題目
嘗試運用此[模板](https://codepen.io/hexschool/pen/KKBabaJ?editors=1010)（修改 `...` 的部分），練習依照上方流程載入 Pinia 建立 store，並在 store 內建立下方資料：

message: 'Pinia Pinia Pinia！'

> 可以先不用渲染資料到畫面上

## 回報流程

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


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

回報區
---

| Discord | CodePen / 答案 |
|:-----------:|:------------------------------------------------------------------:|
| 威0#6919 | [codepen](https://codepen.io/n0918679182/pen/abjjGez?editors=1012) |
| 楊苡安#2752 | [codepen](https://codepen.io/yi-an-yang/pen/bGjjKNK?editors=1111) |
| 阿榮#8277|[CodePen](https://codepen.io/codeitaday/pen/KKBBeMJ)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/mdjjKEB)|
|AuroraC#6539|[codepen](https://codepen.io/AuroraC/pen/zYLLaoG?editors=1010)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/GRBBGpM)|
|心幻羽#0056|[Codepen](https://codepen.io/linglingsyu/pen/GRBBGqO?editors=1010)|
| azami#5986 |[Codepen](https://codepen.io/azami/pen/LYBBrRb)|
| LinaChen#1796 |[Codepen](https://codepen.io/LinaChen/pen/LYBBrQy)|
| JackC#0411 |[Codepen](https://codepen.io/key0329/pen/xxJJzJg)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/gOjjKzj)|
|圈圈#4060|[Codepen](https://codepen.io/wjejfczn-the-bold/pen/dyjjKOv?editors=1010)|
| yuyu#6310 |[Codepen](https://codepen.io/yuyu0905/pen/bGjjjGP?editors=1010)|
|masterYan#2480|[Codepen](https://codepen.io/htzwgoqt-the-looper/pen/jOpppbP?editors=1011)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/mdjjKNz)|
| Potatolee#7749 |[Codepen](https://codepen.io/potatoleee/pen/XWBBBWp?editors=1011)|
| RainLiao#2261 |[Codepen](https://codepen.io/billpop741/pen/xxJJzMd)|
| Wendy77#8049 |[Codepen](https://codepen.io/Wendy__/pen/WNKKKbe)|
| ㄚ翔#8126 |[codepen](https://codepen.io/engineerjohnson/pen/wvxxxdv?editors=1111)|
| ABOOS#6276 |[codepen](https://codepen.io/guhungyin/pen/OJwwwvJ?editors=1011)|
| JillLee#0809 |[CodePen](https://codepen.io/chi-ling-lee/pen/XWBBPao?editors=1011)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/abjjaYr) |
| 冬天#5215 | [CodePen](https://codepen.io/winter_/pen/RwBBeoL) |
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/PoBByje?editors=1010)|
|Wendy3#5615|[CodePen](https://codepen.io/wendy03/pen/MWBBqeV)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/QWBBVGq)|
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/rNrrQjm?editors=1011)|
|YI#0863|[CodePen](https://codepen.io/YI0305/pen/YzjjdKm?editors=1010)|
|Alex#9978|[CodePen](https://codepen.io/datsxzqg-the-selector/pen/zYLLMyW?editors=1011)|
|無名#6427|[CodePen](https://codepen.io/Nomoney/pen/mdjjKxx)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/mdjjQJQ)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/jOppJvV)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/MWBBdoM)|
|yoyo123456#0577|[codepen](https://codepen.io/hungyoyo/pen/bGjxGoG?editors=0011)|
|DIO大人#4776|[codepen](https://codepen.io/oscar-2283/pen/RwBYNvG)|
Zack_P#1805|[codepen](https://codepen.io/tmzazirh-the-animator/pen/qByMOYK?editors=1011)|
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/poZOgwp) |
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/QWBVjYK?editors=0010)|
|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/BaPOzQe?editors=1010)|
|aki|[stackblitz](https://stackblitz.com/edit/github-twn6l7?file=src%2FApp.vue)|
| albee#9121 |[Codepen](https://codepen.io/albee-chang/pen/BaPOvNo?editors=1012)|
| mandylai#4055 |[Codepen](https://codepen.io/mandy-lai-2/pen/vYaaamv)|
| 米米#1824 |[Codepen](https://codepen.io/Jameshsu0407/pen/VwBGqGw?editors=1010)|
| 黑白兔#0684 |[Codepen](https://codepen.io/johnny329/pen/ZEjMVyr)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/zYLJevQ?editors=0010)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/PoBdLbX)|
|hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/VwBELMm?editors=1011)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/jOpeVWx?editors=1010)|
|Kimi #9564|[Codepen](https://codepen.io/kimihu91/pen/WNKgYMb)|
|ABOOS#6276|[Codepen](https://codepen.io/guhungyin/pen/XWByjbg?editors=1011)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/WNKYERQ?editors=1011)|
|泊岸#3466|[Codepen](https://codepen.io/qoq77416416/pen/wvxQOKj?editors=1011)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/abjQxqq?editors=1011)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/GRBPKMq?editors=1010)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[Codepen](https://codepen.io/sho666/pen/eYjbXgo?editors=1011)|
|Chi#7605|[CodePen](https://codepen.io/YoChi84/pen/qByLvqO)|
|Rena#6249 |[Codepen](https://codepen.io/aureate0116/pen/gOjZJpY)
|helena#8461 |[Codepen](https://codepen.io/helena27/pen/bGjOXBJ?editors=1011)
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/poZqMLg)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/oNMmvrN)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/qBygZyw?editors=1011)|
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/qBygREW?editors=1010)|
|Knock59487#9114|[CodePen](https://codepen.io/Zack88/pen/eYjxMLw?editors=1011)|
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/YzjgWeW?editors=1010)|
|大衛#4869|[CodePen](https://codepen.io/exnsrpjc/pen/OJwqEYM?editors=0011)|
|hungya#0773|[CodePen](https://codepen.io/hungya777/pen/YzjoXBv?editors=1010)|
|出示了阿伯#9923|[CodePen](https://codepen.io/BradpittLai/pen/abjgNMw?editors=1010)|
|阿蘇#8531|[CodePen](https://codepen.io/susu3131/pen/MWBNpYO?editors=0011)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/vYzBYBp)
|Yuna Huang#2692|[CodePen](https://codepen.io/Yuna1002/pen/JjajzBW?editors=0010)
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/dyqoRJp?editors=1011)|
|Asher Xu#6308|[CodePen](https://codepen.io/kirakira72/pen/jOvPGZw)|
|yoyo#1003|[CodePen](https://codepen.io/pen/rNZLxWo)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/KKxMmmj)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/jOvBjPK)|
|Eason#7884|[CodePen](https://codepen.io/ASLEO/pen/KKGVWYm)|
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/poxNYVW) |
| Eileen#6454 | [CodePen](https://codepen.io/Eileen-io/pen/YzJZKmv) |