vuex中mapActions的概念及基本用法
概念
先看一下官方文檔對(duì)mapActions的描述：
簡(jiǎn)單來(lái)說(shuō) mapActions 就是將組件中的函數(shù)映射為對(duì)應(yīng)的action。
一般情況下我們會(huì)在組件中使用 this.$store.dispatch() 來(lái)觸發(fā) action ，想要調(diào)用多少個(gè) action 就需要調(diào)用多少次 dispatch() ，而使用 mapActions 的話只需要往 mapActions 中傳入與 action 同名的函數(shù)，然后調(diào)用這些函數(shù)即可觸發(fā)對(duì)應(yīng)的action。
用法
了解了 mapActions 大概是用來(lái)干什么的之后，下面來(lái)介紹一下 mapActions 的具體用法
1、首先在vuex配置文件中定義要使用的 action :
actions: {
login: function(context,data1) {
console.log(data1)
},
exit: function(context,data2) {
console.log(data2)
}
}2、在組件中引入并調(diào)用 mapActions ，然后通過(guò)調(diào)用 mapActions 中的函數(shù)的來(lái)觸發(fā) action ：
<script>
import {mapActions} from "vuex" //引入mapActions
export default {
data(){
return{}
}
created(){
// 調(diào)用函數(shù)觸發(fā)action
this.login('登錄') //登錄
this.exit('退出') //退出
}.
methods:{
...mapActions(['login','exit']),
}
}
</script>到此這篇關(guān)于vuex中mapActions的概念及用法的文章就介紹到這了,更多相關(guān)vuex mapActions內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VUE使用localstorage和sessionstorage實(shí)現(xiàn)登錄示例詳解
這篇文章主要為大家介紹了VUE使用localstorage和sessionstorage實(shí)現(xiàn)登錄示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue?webpack打包原理解析(全網(wǎng)最新最全)
webpack是讓我們可以進(jìn)行模塊化開(kāi)發(fā)，并且會(huì)幫助我們處理模塊間的依賴關(guān)系，這篇文章主要介紹了vue?webpack打包原理,本篇介紹的有點(diǎn)長(zhǎng)，希望大家耐心閱讀2023-02-02
vue3+ts實(shí)現(xiàn)一個(gè)表單組件的詳細(xì)代碼
這篇文章主要介紹了vue3+ts實(shí)現(xiàn)一個(gè)表單組件的詳細(xì)代碼,確保通過(guò)axios調(diào)用后端接口來(lái)獲取省市區(qū)和街道數(shù)據(jù),并在選擇省市區(qū)時(shí)加載相應(yīng)的街道數(shù)據(jù),需要的朋友可以參考下2024-07-07
vue-cli開(kāi)發(fā)環(huán)境實(shí)現(xiàn)跨域請(qǐng)求的方法
本篇文章主要介紹了vue-cli開(kāi)發(fā)環(huán)境實(shí)現(xiàn)跨域請(qǐng)求的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要介紹了vue彈窗父子組件調(diào)用問(wèn)題，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
vue :style設(shè)置背景圖片方式backgroundImage
這篇文章主要介紹了vue :style設(shè)置背景圖片方式backgroundImage,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用
這篇文章主要介紹了vue+elementUI組件tree如何實(shí)現(xiàn)單選加條件禁用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
使用Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的思維導(dǎo)圖組件
思維導(dǎo)圖是一種用于表示信息、想法和概念的圖形化工具,本文將基于 Vue3和VueDraggable實(shí)現(xiàn)一個(gè)簡(jiǎn)單的思維導(dǎo)圖組件,支持節(jié)點(diǎn)拖拽,編輯及節(jié)點(diǎn)之間的關(guān)系連接,希望對(duì)大家有所幫助2025-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)div單選多選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07