--- 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]() | -->