詳解關(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)物車方法中要傳入一個(gè)字典對(duì)象里面保存產(chǎn)品信息item，還要傳入一個(gè)產(chǎn)品數(shù)量的參數(shù)num
然而如果這么寫的話就會(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)用的話就product.item,product.num就解決了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue 使用vue-cropper裁剪圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)
本文主要介紹了vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
echarts 使用formatter 修改鼠標(biāo)懸浮事件信息操作
這篇文章主要介紹了echarts 使用formatter 修改鼠標(biāo)懸浮事件信息操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue3 組件庫(kù)的環(huán)境配置搭建過(guò)程
這篇文章主要介紹了Vue3 組件庫(kù)的環(huán)境配置搭建過(guò)程,使用 Vite+Ts 開(kāi)發(fā)的是 Vue3 組件庫(kù),所以我們需要安裝 typescript、vue3,同時(shí)項(xiàng)目將采用 Less 進(jìn)行組件庫(kù)樣式的管理，需要的朋友可以參考下2023-03-03
Vue3中reactive變量重新賦值無(wú)法響應(yīng)的3種處理方法
這篇文章主要給大家介紹了關(guān)于Vue3中reactive變量重新賦值無(wú)法響應(yīng)的3種處理方法,在Vue3中可以使用reactive函數(shù)將一個(gè)普通對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象,需要的朋友可以參考下2023-08-08
Vue項(xiàng)目報(bào)錯(cuò)：Uncaught SyntaxError: Unexpected token <
這篇文章主要介紹了Vue項(xiàng)目報(bào)錯(cuò)：Uncaught SyntaxError: Unexpected token <，在引入第三方依賴的 JS 文件時(shí)，遇到的一個(gè)問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
Vue 動(dòng)態(tài)添加表單實(shí)現(xiàn)動(dòng)態(tài)雙向綁定
動(dòng)態(tài)表單是一個(gè)常見(jiàn)的需求,本文詳細(xì)介紹了Vue.js中實(shí)現(xiàn)動(dòng)態(tài)表單的創(chuàng)建,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-12-12
這篇文章主要介紹了vue 翻頁(yè)組件vue-flip-page，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
Vue彈窗的兩種實(shí)現(xiàn)方式實(shí)例詳解
這篇文章主要介紹了Vue彈窗的兩種實(shí)現(xiàn)方式,一種使用.sync修飾符另一種使用v-model，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-08-08
路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見(jiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04