---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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
> p.s. (by同學)：Vue 的 CDN 要換這個 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

接下來，需創建 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！'

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

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

## 回報流程

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


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

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

回報區
---

| Discord | CodePen / 答案 |
|:-----------:|:------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/LYaLmgx?editors=0010) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/WNmOyrq?editors=1011) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/LYaLJpV) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/WNmOgwJ) |
| Wei_Rio |[CodePen](https://codepen.io/wei_wu/pen/QWogVgV?editors=1010)|
| Celine 510 |[CodePen](https://codepen.io/Celine-510/pen/MWxoqxg)|
| stone4584|[CodePen](https://codepen.io/Royen0506/pen/wvOeQqz)|
| kawa | [CodePen](https://codepen.io/z83xji6/pen/rNRwQdr?editors=1011) |
| pikachu | [CodePen](https://codepen.io/_pikachu_/pen/dyrRKJK) |
| andrea | [CodePen](https://codepen.io/Wpypy/pen/yLwXEey) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/GReEzxz) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/mdowoyZ?editors=1111) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/oNVwOmZ?editors=1010) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/yLwXrPZ) |
| SHUO | [CodePen](https://codepen.io/xrzarxkl-the-reactor/pen/VwRWOWX?editors=1010) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/MWxoqwz) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/rNRzNxY?editors=1010) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/vYPJOKR?editors=0011) |
| Fabio20 | [CodePen](https://codepen.io/hexschool/pen/bGjqqpv?editors=1010) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/BabdKeB?editors=0011) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/eYXRKpJ) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/NWJgVoq) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/jOJLMMx) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/bGZrwMM) |
| hedy | [CodePen](https://codepen.io/Hedy_H/pen/BabdLXP?editors=1010) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/wvOqoYV) |
| Eden |[Codepen](https://codepen.io/iseden/pen/LYajxRg)|
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/WNmEpVL) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/BabdWeV) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/jOJLwYm?editors=1010) |
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/xxBLLbN?editors=1012) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/bGZrobm?editors=1010) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/KKEvyZm?editors=1010) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/xxBLprK) |
| Ting |[CodePen](https://codepen.io/liara/pen/KKEvQJd) |
| Jim |[CodePen](https://codepen.io/asiahedh-the-encoder/pen/vYPJPjq?editors=1010) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/zYbdXQY) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/zYbdbqP) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/oNVerZa?editors=1010) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/YzgxmQw) |
| PoWei#8484 | [CodePen](https://codepen.io/Po-Wei-Lai/pen/LYazPPR?editors=1010) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/NWJgmBL) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/oNVexYG) |
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/eYXGZep?editors=1010) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/ExMwNQg) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/oNVGYJp) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/JjzyqRb?editors=1010) |
| dora | [CodePen](https://codepen.io/dorayu/pen/ZEPXvLj?editors=1011) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/PoLJBqL?editors=1010) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/KKEXbPq) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/gOEGqbG) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/zYbPezO?editors=1010) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/WNmdejy?editors=1010) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/MWxrmPR?editors=1010) |
|Yang|[CodePen](https://codepen.io/Yang-J/pen/eYXyLEe)|
|Iris|[CodePen](https://codepen.io/iris831206/pen/vYPpVBO?editors=1010)|
|macihuang|[CodePen](https://codepen.io/macy1215/pen/dyrJBKJ)|
| 依依| [CodePen](https://codepen.io/Rita-Yang/pen/BabYObj?editors=1010) |
| jeremyChan| [CodePen](https://codepen.io/nudieisgood/pen/RwdQvJR?editors=1012) |
| shuuu| [CodePen](https://codepen.io/jybvfzos-the-bashful/pen/VwRdEZx?editors=1011) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/Jjzeodw) |
|yuling|[Codepen](https://codepen.io/igzdflpu/pen/mdogVeL?editors=1011)|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/wvZKJmv) |

<!--

| user | [CodePen]() |

-->