詳解vuex中mutation/action的傳參方式
前言
在vuex中提交 mutation 是更改狀態(tài)的唯一方法,并且這個(gè)過程是同步的,異步邏輯都應(yīng)該封裝到 action 里面。對于mutation/action,有一個(gè)常見的操作就是傳參,也就是官網(wǎng)上說的“提交載荷”。
這里是關(guān)于如何在vue-cli中使用vuex的方法,我們采用將vuex設(shè)置分割成不同模塊的方法。其中,state模塊中配置如下
//vuex中的state const state = { count: 0 } export default state;
mutation傳參
樸實(shí)無華的方式
mutation.js
//vuex中的mutation const mutations = { increment: (state,n) => { //n是從組件中傳來的參數(shù) state.count += n; } } export default mutations;
vue組件中(省去其他代碼)
methods: { add(){ //傳參 this.$store.commit('increment',5); } }
對象風(fēng)格提交參數(shù)
mutation.js
//vuex中的mutation const mutations = { decrementa: (state,payload) => { state.count -= payload.amount; } } export default mutations;
vue組件
methods: { reducea(){ //對象風(fēng)格傳參 this.$store.commit({ type: 'decrementa', amount: 5 }); }, }
action傳參
樸實(shí)無華
action.js
/vuex中的action const actions = { increment(context,args){ context.commit('increment',args); } } export default actions;
mutation.js
//vuex中的mutation const mutations = { increment: (state,n) => { state.count += n; } } export default mutations;
vue組件
methods: { adda(){ //觸發(fā)action this.$store.dispatch('increment',5); } }
對象風(fēng)格
action.js
//vuex中的action const actions = { decrementa(context,payload){ context.commit('decrementa',payload); } } export default actions;
mutation.js
//vuex中的mutation const mutations = { decrementa: (state,payload) => { state.count -= payload.amount; } } export default mutations;
vue組件
methods: { reduceb(){ this.$store.dispatch({ type: 'decrementa', amount: 5 }); } }
action的異步操作
突然就想總結(jié)一下action的異步操作。。。。
返回promise
action.js
//vuex中的action const actions = { asyncMul(context,payload){ //返回promise給觸發(fā)的store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit('multiplication',payload); resolve("async over"); },2000); }); } } export default actions;
mutation.js
//vuex中的mutation const mutations = { multiplication(state,payload){ state.count *= payload.amount; } } export default mutations;
vue組件
methods: { asyncMul(){ let amount = { type: 'asyncMul', amount: 5 } this.$store.dispatch(amount).then((result) => { console.log(result); }); } }
在另外一個(gè) action 中組合action
action.js
//vuex中的action const actions = { asyncMul(context,payload){ //返回promise給觸發(fā)的store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit('multiplication',payload); resolve("async over"); },2000); }); }, actiona({dispatch,commit},payload){ return dispatch('asyncMul',payload).then(() => { commit('multiplication',payload); return "async over"; }) } } export default actions;
mutation.js
//vuex中的mutation const mutations = { multiplication(state,payload){ state.count *= payload.amount; } } export default mutations;
vue組件
methods: { actiona(){ let amount = { type: 'actiona', amount: 5 } this.$store.dispatch(amount).then((result) => { console.log(result); }); } }
使用async函數(shù)
action.js
//vuex中的action const actions = { asyncMul(context,payload){ //返回promise給觸發(fā)的store.dispatch return new Promise((resolve,reject) => { setTimeout(() => { context.commit('multiplication',payload); resolve("async over"); },2000); }); }, async actionb({dispatch,commit},payload){ await dispatch('asyncMul',payload); commit('multiplication',payload); } } export default actions;
mutation.js
//vuex中的mutation const mutations = { multiplication(state,payload){ state.count *= payload.amount; } } export default mutations;
vue組件
methods: { actionb(){ let amount = { type: 'actionb', amount: 5 } this.$store.dispatch(amount).then(() => { ... }); } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue開發(fā)利器之unplugin-auto-import的使用
unplugin-auto-import 解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動導(dǎo)入,也支持自定義插件的自動導(dǎo)入,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)利器之unplugin-auto-import使用的相關(guān)資料,需要的朋友可以參考下2023-02-02vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解
這篇文章主要為大家介紹了vue3實(shí)現(xiàn)數(shù)字滾動特效實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue3 選中對話框時(shí)對話框右側(cè)出一個(gè)箭頭效果
本文主要介紹了Vue3實(shí)現(xiàn)選中對話框帶箭頭效果的方法,首先通過后臺獲取數(shù)據(jù)進(jìn)行遍歷,利用ts代碼判斷選中下標(biāo)與循環(huán)游標(biāo)是否一致以改變樣式,感興趣的朋友一起看看吧2024-10-10