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