這篇文章將為大家詳細(xì)講解有關(guān)vuex中怎么利用mutation或action傳參，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。
前言
在vuex中提交 mutation 是更改狀態(tài)的唯一方法，并且這個過程是同步的，異步邏輯都應(yīng)該封裝到 action 里面。對于mutation/action，有一個常見的操作就是傳參，也就是官網(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);
});
}
}在另外一個 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(() => {
...
});
}
}關(guān)于vuex中怎么利用mutation或action傳參就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
