vuex中mapActions的概念及基本用法
更新時間：2023年09月08日 14:44:12 作者：Jiang_JY
mapActions 就是將組件中的函數(shù)映射為對應的action，通過本文我們了解了mapActions 大概是用來干什么的，接下來介紹一下 mapActions 的具體用法，感興趣的朋友一起看看吧
概念
先看一下官方文檔對mapActions的描述：
簡單來說 mapActions 就是將組件中的函數(shù)映射為對應的action。
一般情況下我們會在組件中使用 this.$store.dispatch() 來觸發(fā) action ，想要調用多少個 action 就需要調用多少次 dispatch() ，而使用 mapActions 的話只需要往 mapActions 中傳入與 action 同名的函數(shù)，然后調用這些函數(shù)即可觸發(fā)對應的action。
用法
了解了 mapActions 大概是用來干什么的之后，下面來介紹一下 mapActions 的具體用法
1、首先在vuex配置文件中定義要使用的 action :
actions: {
login: function(context,data1) {
console.log(data1)
},
exit: function(context,data2) {
console.log(data2)
}
}2、在組件中引入并調用 mapActions ，然后通過調用 mapActions 中的函數(shù)的來觸發(fā) action ：
<script>
import {mapActions} from "vuex" //引入mapActions
export default {
data(){
return{}
}
created(){
// 調用函數(shù)觸發(fā)action
this.login('登錄') //登錄
this.exit('退出') //退出
}.
methods:{
...mapActions(['login','exit']),
}
}
</script>到此這篇關于vuex中mapActions的概念及用法的文章就介紹到這了,更多相關vuex mapActions內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中關于redirect(重定向)初學者的坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了詳解vue.js全局組件和局部組件，實例分析了全局組件和局部的技巧，有興趣的可以了解一下。2017-04-04
vue 使用axios 數(shù)據(jù)請求第三方插件的使用教程詳解
這篇文章主要介紹了vue 使用axios 數(shù)據(jù)請求第三方插件的使用 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結合使用詳解
這篇文章主要介紹了vue項目ElementUI組件中el-upload組件與圖片裁剪功能組件結合使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了派發(fā)器抽離vue2單組件中的大量邏輯技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了bing Map 在vue項目中的使用,需要的朋友可以參考下2018-04-04
Hexo已經看膩了，來手把手教你使用VuePress搭建個人博客
vuepress是尤大大4月12日發(fā)布的一個全新的基于vue的靜態(tài)網站生成器，實際上就是一個vue的spa應用，內置webpack，可以用來寫文檔。這篇文章給大家介紹了VuePress搭建個人博客的過程，感興趣的朋友一起看看吧2018-04-04
與如何在React項目中應用TypeScript類類似在VUE項目中應用typescript，我們需要引入一個庫vue-property-decorator，需要的小伙伴可續(xù)看下文具體介紹2021-09-09
在Vue項目中，我們經常需要引入外部的模塊或文件，這時候就會用到import和require這兩個關鍵字，本文將詳細分析它們的用法，并提供具體的代碼實例和解釋,需要的朋友可以參考下2023-06-06
Vue 組件事件觸發(fā)和監(jiān)聽實現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue 組件事件觸發(fā)和監(jiān)聽實現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12