---
# System prepended metadata

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

---

---
tags: Vue 直播班 - 2023 冬季班
---
# 🏅 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)
> 操作示意

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

## 回報流程

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

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

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

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




回報區
---


|   Discord    |                           CodePen / 答案                           |
|:------------:|:------------------------------------------------------------------:|
| Yijing | [CodePen](https://codepen.io/Yi-Jing-71080635/pen/bGZrzXb?editors=1010) |
| bf_tsai | [CodePen](https://codepen.io/BF-Tsai/pen/eYXEXRG) |
| Tippy | [CodePen](https://codepen.io/Ektodor-Wang/pen/qBvXvYQ) |
| JING | [CodePen](https://codepen.io/HSUANIN0327/pen/gOExExY) |
| Wei_Rio |[CodePen](https://codepen.io/wei_wu/pen/LYajvpw?editors=0111)|
| XinYu | [CodePen](https://codepen.io/HsuXinYu/pen/qBvXwWG?editors=1011) |
| Ryann | [CodePen](https://codepen.io/csw8524/pen/yLworjQ) |
| Uli | [CodePen](https://codepen.io/uli1313/pen/poYrBQq?editors=1011) |
| Ting | [CodePen](https://codepen.io/liara/pen/GRevLwv) |
| Chia Pin | [CodePen](https://codepen.io/joker-cat/pen/zYbdQYG) |
| Leo | [CodePen](https://codepen.io/Aruminiya/pen/OJqjYgB) |
| Fabio20 | [CodePen](https://codepen.io/fabio7621/pen/RwdZzZm?editors=1011) |
| Moreene | [CodePen](https://codepen.io/Moreene/pen/gOExNxY) |
| Nelly | [CodePen](https://codepen.io/Nelly-Guo/pen/VwRzJGO?editors=1010) |
| Tom | [CodePen](https://codepen.io/sp1daTomm/pen/abMyebX) |
| chuchu | [CodePen](https://codepen.io/Wpypy/pen/NWJvJed?editors=1011) |
| kawa | [CodePen](https://codepen.io/z83xji6/pen/jOJLgXe?editors=0011) |
| runweiting | [CodePen](https://codepen.io/weiting14/pen/rNRGBNB) |
| Winnie | [CodePen](https://codepen.io/codepen-io-winnie/pen/PoLJYyX?editors=1011) |
| stone4584 | [CodePen](https://codepen.io/Royen0506/pen/zYbEYqE?editors=1111) |
| 風羽 | [CodePen](https://codepen.io/Joy-Huang/pen/gOEGOEa?editors=1011) |
| KUN. | [CodePen](https://codepen.io/barry91205/pen/xxBXbro?editors=1010) |
| ann6212 | [CodePen](https://codepen.io/yqmegupa-the-styleful/pen/LYazVVb) |
| Eazy | [CodePen](https://codepen.io/Eazychen/pen/vYPeNqY?editors=1011) |
| Pikachu | [CodePen](https://codepen.io/_pikachu_/pen/MWxEyqa) |
| 狸貓 | [CodePen](https://codepen.io/tanuki320/pen/NWJaNwJ?editors=1011) |
| MY | [CodePen](https://codepen.io/ahmomoz/pen/OJqxXQP) |
| yu.t_liu | [CodePen](https://codepen.io/YuT200053/pen/ZEPXpRV?editors=1010) |
| 精靈 | [CodePen](https://codepen.io/justafairy/pen/yLwzVyr) |
| Rock | [CodePen](https://codepen.io/xiu43317/pen/KKEXaaM) |
| 銀光菇 | [CodePen](https://codepen.io/genesynthesis/pen/RwdLRPq) |
| RayRay | [CodePen](https://codepen.io/CityRay/pen/ExMwoxd) |
| santu0868 | [CodePen](https://codepen.io/HatsumiSan/pen/poYWpEa?editors=1010) |
| PoWei#8484 | [CodePen](https://codepen.io/Po-Wei-Lai/pen/ZEPXvMV?editors=1011) |
| Ataraxia | [CodePen](https://codepen.io/ataraxia8888/pen/WNmZgoO) |
| chris | [CodePen](https://codepen.io/cjtseng07/pen/ExMwdbK) |
| Celine 510 | [CodePen](https://codepen.io/Celine-510/pen/poYWQWE) |
| Antonio | [CodePen](https://codepen.io/gwhvusel-the-builder/pen/yLwzQjM) |
| MikeLin | [CodePen](https://codepen.io/MikeLin0701/pen/WNmZLoO) |
| PoRay | [CodePen](https://codepen.io/raycheng/pen/PoLJryY?editors=1010) |
| 熊大 | [CodePen](https://codepen.io/asiating/pen/wvOqZEy) |
| Jim | [CodePen](https://codepen.io/asiahedh-the-encoder/pen/dyrZGEG?editors=1010) |
| peggy | [CodePen](https://codepen.io/peggylai/pen/eYXGLqo) |
| dora | [CodePen](https://codepen.io/dorayu/pen/xxBPGqZ?editors=1010) |
| 小夏 | [CodePen](https://codepen.io/michaelhsia/pen/RwdjJbG) |
| skypassion5000 | [CodePen](https://codepen.io/skypassion5000/pen/Rwdjvqj?editors=1010) |
| jia yu | [CodePen](https://codepen.io/fjqxaznl-the-reactor/pen/bGZabaM?editors=1011) |
| Ariel | [CodePen](https://codepen.io/ariel0510/pen/yLwpemE) |
| .zack_p | [CodePen](https://codepen.io/Designer-PH/pen/QWoagXj?editors=1011) |
| 欣霓 | [CodePen](https://codepen.io/tvxq5206/pen/ZEPXppj?editors=1010) |
| Iris | [CodePen](https://codepen.io/iris831206/pen/rNRpqmP?editors=1011) |
|Yang|[Codepen](https://codepen.io/Yang-J/pen/XWGVxaQ)|
|macihuang|[Codepen](https://codepen.io/macy1215/pen/XWGZJPq)|
| jeremyChan | [CodePen](https://codepen.io/nudieisgood/pen/RwdQmYR?editors=1011) |
| 依依 | [CodePen](https://codepen.io/Rita-Yang/pen/GReQabm?editors=1011) |
| 貢波波夫 | [CodePen](https://codepen.io/mxgrfgcr-the-bashful/pen/xxBWdOQ) |
| Charlotte Lee | [CodePen](https://codepen.io/char849/pen/eYXPZpO) |
| hsuhsusophie | [CodePen](https://codepen.io/hsuhsusophie/pen/jOJXEgZ?editors=1111) |
| Eden |[Codepen](https://codepen.io/iseden/pen/oNOXpMJ)|
| yuan! | [CodePen](https://codepen.io/townyuan/pen/oNOjZVQ) |

<!-- 

| user | [CodePen]() |

-->
