詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問(wèn)題
問(wèn)題：
已知Vuex中通過(guò)actions提交mutations要通過(guò)context.commit(mutations,object)的方式來(lái)完成
然而commit中只能傳入兩個(gè)參數(shù)，第一個(gè)就是mutations,第二個(gè)就是要傳入的參數(shù)
一開(kāi)始遇到的問(wèn)題是加入購(gòu)物車(chē)方法中要傳入一個(gè)字典對(duì)象里面保存產(chǎn)品信息item，還要傳入一個(gè)產(chǎn)品數(shù)量的參數(shù)num
然而如果這么寫(xiě)的話(huà)就會(huì)報(bào)錯(cuò)：context.commit(mutations,item,num)
解決辦法：
將第二個(gè)參數(shù)以對(duì)象的放式提交就像這樣
mutations = {
PRODUCT_ADDTO_CART:(state,product) => {
//code
}
}
actions = {
productaddtocart:(context,value) => {
context.commit('PRODUCT_ADDTO_CART', value);
},
}
在頁(yè)面調(diào)用方法的時(shí)候是這樣的：
productAddToCart(item,productNum){
this.productaddtocart({"item":item,"num":this.productNum})
}
這里的關(guān)鍵信息是將參數(shù)打包成一個(gè)字典對(duì)象傳入，在mutations里面調(diào)用的話(huà)就product.item,product.num就解決了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別，文中通過(guò)示例為大家進(jìn)行了詳細(xì)講解，對(duì)Vue感興趣的同學(xué)，可以學(xué)習(xí)一下2022-04-04
vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法
這篇文章主要介紹了vue項(xiàng)目前端加前綴(包括頁(yè)面及靜態(tài)資源)的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
關(guān)于vue.js過(guò)渡css類(lèi)名的理解(推薦)
這篇文章主要介紹了關(guān)于vue.js過(guò)渡css類(lèi)名的理解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-04-04
Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼
本文主要介紹了Vue+SpringBoot實(shí)現(xiàn)支付寶沙箱支付的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
安裝VUE-CLI一直失敗的排錯(cuò)過(guò)程及解決方案
這篇文章主要介紹了安裝VUE-CLI一直失敗的排錯(cuò)過(guò)程及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue實(shí)現(xiàn)動(dòng)態(tài)路由詳細(xì)
我們開(kāi)發(fā)后臺(tái)管理系統(tǒng)過(guò)程中，會(huì)由不同的人操作系統(tǒng)，有admin（管理員）、superAdmin(超管)，及各種運(yùn)營(yíng)、財(cái)務(wù)人員。為了區(qū)別這些人員，會(huì)給不同的人分配不一樣的角色來(lái)展示不同的菜單，這就必須要通過(guò)動(dòng)態(tài)路由來(lái)實(shí)現(xiàn)。下面就來(lái)介紹vue實(shí)現(xiàn)動(dòng)態(tài)路由,需要的朋友可參考一下2021-10-10
vue3+ts+echarts實(shí)現(xiàn)按需引入和類(lèi)型界定方式
這篇文章主要介紹了vue3+ts+echarts實(shí)現(xiàn)按需引入和類(lèi)型界定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)實(shí)例代碼（防抖函數(shù)的應(yīng)用場(chǎng)景）
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)手機(jī)號(hào)碼的校驗(yàn)的相關(guān)資料，主要是防抖函數(shù)的應(yīng)用場(chǎng)景，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue中如何使用Axios發(fā)送FormData請(qǐng)求
Axios提供了簡(jiǎn)單而強(qiáng)大的API來(lái)處理HTTP請(qǐng)求,而FormData提供了用于構(gòu)建表單數(shù)據(jù)的API,這篇文章主要介紹了Vue中如何使用Axios發(fā)送FormData請(qǐng)求,需要的朋友可以參考下2024-07-07