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