---
# System prepended metadata

title: "\U0001F3C5 Day 28 - Pinia - 在元件運用 store 內方法"
tags: [Vue 直播班 - 2022 冬季班]

---

---
tags: Vue 直播班 - 2022 冬季班
---
# 🏅 Day 28 - Pinia - 在元件運用 store 內方法
在前幾天有提到，要在 store 內撰寫方法可以使用 actions，
而我們要在元件中取用 actions 內函式，需要使用到 `mapActions()`

以下是一個簡單範例：
建立一個元件，呈現一個按鈕及數字，
當點擊按鈕時，讓畫面呈現的數字加一

### 1. actions
在 actions 中撰寫要運用的方法
```javascript=
// 定義 store
const addStore = defineStore('addStore', {
  state: () => ({
    // 要呈現出的數字資料
    currentNum: 0
  }),
  actions: {
    // 定義方法    
    plusNum() {
      // 在此取用 state 內的資料可以使用 this
      this.currentNum += 1;
      // console.log(this.currentNum);
    }
  }
})

// 元件
app.component('PlusNum', {
  template: `<p>{{ currentNum }}</p>
    <button>+1</button>
  `,
  computed: {
    // 取出資料 currentNum
    ...mapState(addStore, ['currentNum'])
  }
})
```

### 2. mapActions() 取用 store 內方法
我們要使用方法，所以會在元件中的 methods 取用
```javascript=
const addStore = defineStore('addStore', {
  state: () => ({
    currentNum: 0
  }),
  actions: {
    // 定義方法    
    plusNum() {
      // 在此取用 state 內的資料可以使用 this
      this.currentNum += 1;
      // console.log(this.currentNum);
    }
  }
})

// 元件
// PlusNum 元件
app.component('PlusNum', {
  template: `<p>{{ currentNum }}</p>
    <button @click="plusNum()">+1</button>
  `, // 使用 v-on click 點擊事件觸發 plusNum() 方法
  computed: {
    // 取出資料 currentNum
    ...mapState(addStore, ['currentNum'])
  },
  // 要使用方法要運用 methods
  methods: {
    // 運用 Pinia mapActions()
    // 第一個參數為定義的 store 變數
    // 第二個參數為在 actions 定義的方法名稱
    ...mapActions(addStore, ['plusNum'])
  }
})
```
> 觀看完整範例：https://codepen.io/hexschool/pen/XWBRBxY?editors=1011

### 題目
使用上方範例，嘗試練習再製作一顆按鈕，
點擊按鈕讓呈現的數字 `-2` 吧！

![](https://i.imgur.com/QuK40jo.gif)
> 操作示意

## 回報流程

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

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

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




回報區
---


|   Discord    |                           CodePen / 答案                           |
|:------------:|:------------------------------------------------------------------:|
|  冬天#5215   |         [CodePen](https://codepen.io/winter_/pen/QWBZYBB)          |
| Wendy3#5615  |         [CodePen](https://codepen.io/wendy03/pen/XWBxOor)          |
|   威0#6919   | [codepen](https://codepen.io/n0918679182/pen/JjBmxqX?editors=1011) |
|  yuyu#6310   |  [codepen](https://codepen.io/yuyu0905/pen/GRBYzVy?editors=1011)   |
| AuroraC#6539 |   [codepen](https://codepen.io/AuroraC/pen/mdjzoyp?editors=1011)   |
| Benson#6763  |         [Codepen](https://codepen.io/kumashow/pen/eYjPxaq)         |
|  albee#9121  | [CodePen](https://codepen.io/albee-chang/pen/JjBmzKb?editors=1011) |
|   YC#2522    |           [CodePen](https://codepen.io/YCLu/pen/MWBPxpW)           |
| 阿榮#8277|[CodePen](https://codepen.io/codeitaday/pen/vYaVPbz)|
| 泊岸#3466|[CodePen](https://codepen.io/qoq77416416/pen/vYaVPwV?editors=1011)|
| mandylai#4055 |[CodePen](https://codepen.io/mandy-lai-2/pen/LYBgvQM)|
|ㄚ翔#8126|[codepen](https://codepen.io/engineerjohnson/pen/BaPqEOK)|
|威爾#1694|[CodePen](https://codepen.io/WILL_Wu/pen/RwBeOKO)|
|楊苡安#2752|[CodePen](https://codepen.io/yi-an-yang/pen/WNKaWWj?editors=1011)|
|無名#6427|[CodePen](https://codepen.io/Nomoney/pen/mdjjKxx)|
|Potatolee#7749|[CodePen](https://codepen.io/potatoleee/pen/yLqRrxz?editors=1011)|
|LinaChen#1796|[CodePen](https://codepen.io/LinaChen/pen/rNrqbLz)|
|心幻羽#0056|[CodePen](https://codepen.io/linglingsyu/pen/OJwBYRp)|
|阿鑫#4346|[CodePen](https://codepen.io/Neil1024/pen/eYjPavb?editors=0011)|
|Wendy77#8049|[Codepen](https://codepen.io/Wendy__/pen/xxJyNRo)|
|Bassjim#0118|[Codepen](https://codepen.io/unrtxbaq/pen/YzjJoZE?editors=1011)|
|hannahTW#2224|[Codepen](https://codepen.io/hangineer/pen/VwBEJyy?editors=0010)|
|法希娜#3206|[Codepen](https://codepen.io/yiiserpf-the-encoder/pen/VwBVZgm?editors=1011)|
|Cheryl#4007|[Codepen](https://codepen.io/Cheryl-Hsu/pen/qByQEoQ?editors=0010)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/OJwaPBM)|
|RainLiao#2616|[Codepen](https://codepen.io/billpop741/pen/mdjQePp)|
| azami#5986 |[CodePen](https://codepen.io/azami/pen/jOpQbbd)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/gOjQaPe?editors=0011)
|圈圈#4060|[codepen](https://codepen.io/wjejfczn-the-bold/pen/GRBwqOG?editors=1111)|
|Tuhacrt#0008|[codepen](https://codepen.io/Tuhacrt/pen/mdjQEXK)|
|Amberhh#2465|[codepen](https://codepen.io/Amberhh/pen/KKBGLeG)|
|ABOOS#6276|[Codepen](https://codepen.io/guhungyin/pen/qByQaKQ?editors=1010)|
|DIO大人#4776|[Codepen](https://codepen.io/oscar-2283/pen/WNKYGVj)|
|kuku#3118|[Codepen](https://codepen.io/mengting-ku/pen/YzjRpOG)|
|Austyn#0949|[Codepen](https://codepen.io/fish90547/pen/zYLMZYz?editors=1011)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/zYLMNaK?editors=1011)|
|kenki100#0068|[Codepen](https://codepen.io/ken100/pen/eYjQgBY)|
|MengLin#3001|[Codepen](https://codepen.io/aacj2642/pen/oNMQZjy?editors=1011)|
Zack_P#1805|[Codepen](https://codepen.io/tmzazirh-the-animator/pen/gOjQWKW?editors=1011)|
|薯餅#3581|[Codepen](https://codepen.io/ColdingPoTaTo/pen/MWBzomg)|
|aki|[stackblitz](https://stackblitz.com/edit/github-twn6l7?file=src/stores/counterStore.ts)|
|柚子#3958|[Codepen](https://codepen.io/as6625998/pen/QWBJObJ?editors=1011)|
| christina#6185 | [Codepen](https://codepen.io/chrisc0210/pen/QWBJaWw)|
|Hazel.#6020|[CodePen](https://codepen.io/Hazelhsieh/pen/RwBezeY?editors=1010)| 
| JackC#0411 | [Codepen](https://codepen.io/key0329/pen/BaPGbWV)|
|jacky010080#0880|[CodePen](https://codepen.io/Yen-Jung-Chen/pen/gOjQyyb?editors=1011)|
|JillLee#0809|[CodePen](https://codepen.io/chi-ling-lee/pen/WNKYqYW?editors=1011)|
|Alex#9978|[CodePen](https://codepen.io/datsxzqg-the-selector/pen/jOpXOPe?editors=1011)|
|masterYan#2480|[CodePen](https://codepen.io/htzwgoqt-the-looper/pen/NWBepaW?editors=1011)|
|CofCat#9226|[CodePen](https://codepen.io/cofcat456/pen/jOpXavR?editors=1011)|
|Chi#7605|[Codepen](https://codepen.io/YoChi84/pen/dyjwrBz)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/yLqGWgz)
|米米#1824|[Codepen](https://codepen.io/Jameshsu0407/pen/KKBbYBz?editors=1011)|
|Knock59487#9114|[CodePen](https://codepen.io/Zack88/pen/VwBgXba?editors=1011)|https://codepen.io/Zack88/pen/yLqZKdW?editors=1011)|
|Hilda#7085|[Codepen](https://codepen.io/vwquikad-the-vuer/pen/GRBzdJx)|
|Kimi#9564|[Codepen](https://codepen.io/kimihu91/pen/WNKgYMb)|
|小木馬#8760|[Codepen](https://codepen.io/wmmtbcsd/pen/BaPbKmN?editors=1011)|
|yoyo123456#0577|[Codepen](https://codepen.io/hungyoyo/pen/oNMVWjy?editors=1010)|
|大衛#4869|[Codepen](https://codepen.io/exnsrpjc/pen/MWBxqbM?editors=1010)|
|Yiru#0236|[Codepen](https://codepen.io/yiru94/pen/MWBRWqq?editors=1011)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/NWBmzgK?editors=1011)|
|helena#8461|[Codepen](https://codepen.io/helena27/pen/mdjYRrN?editors=1011)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/wvxLMoe?editors=1011)|
|出事了阿伯#9923|[Codepen](https://codepen.io/BradpittLai/pen/xxJoOyy?editors=1010)|
|GOD_QWERTYUIOPLKJLKLLOINJ_MASTER#4922|[Codepen](https://codepen.io/sho666/pen/JjBQxoY)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/GRBVWGj?editors=1011)|
|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/ZEMzERB)
|Yuna Huang#2692|[CodePen](https://codepen.io/Yuna1002/pen/oNPNOaJ)
|yaru#6308|[CodePen](https://codepen.io/lszaietc/pen/xxaGXwj?editors=1011)|
|yoyo#1003|[CodePen](https://codepen.io/pen/xxaOZJb)|
|Mylène#2481|[CodePen](https://codepen.io/hamajibashi/pen/QWVEOYp)|
|Judy Wei#6103|[CodePen](https://codepen.io/Judy0718/pen/dyqvxoZ)|
|黑白兔#0684|[CodePen](https://codepen.io/johnny329/pen/eYjXbzq)|
|KC_8685#9343|[Codepen](https://codepen.io/cathy7411/pen/OJwrBvR)|
|Eason#7884|[Codepen](https://codepen.io/ASLEO/pen/ExdPXqW)|