详解vuex中mutation/action的传参方式
前言
在vuex中提交mutation是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到action里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。
这里是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下
//vuex中的state
conststate={
count:0
}
exportdefaultstate;
mutation传参
朴实无华的方式
mutation.js
//vuex中的mutation
constmutations={
increment:(state,n)=>{
//n是从组件中传来的参数
state.count+=n;
}
}
exportdefaultmutations;
vue组件中（省去其他代码）
methods:{
add(){
//传参
this.$store.commit('increment',5);
}
}
对象风格提交参数
mutation.js
//vuex中的mutation
constmutations={
decrementa:(state,payload)=>{
state.count-=payload.amount;
}
}
exportdefaultmutations;
vue组件
methods:{
reducea(){
//对象风格传参
this.$store.commit({
type:'decrementa',
amount:5
});
},
}
action传参
朴实无华
action.js
/vuex中的action
constactions={
increment(context,args){
context.commit('increment',args);
}
}
exportdefaultactions;
mutation.js
//vuex中的mutation
constmutations={
increment:(state,n)=>{
state.count+=n;
}
}
exportdefaultmutations;
vue组件
methods:{
adda(){
//触发action
this.$store.dispatch('increment',5);
}
}
对象风格
action.js
//vuex中的action
constactions={
decrementa(context,payload){
context.commit('decrementa',payload);
}
}
exportdefaultactions;
mutation.js
//vuex中的mutation
constmutations={
decrementa:(state,payload)=>{
state.count-=payload.amount;
}
}
exportdefaultmutations;
vue组件
methods:{
reduceb(){
this.$store.dispatch({
type:'decrementa',
amount:5
});
}
}
action的异步操作
突然就想总结一下action的异步操作。。。。
返回promise
action.js
//vuex中的action
constactions={
asyncMul(context,payload){
//返回promise给触发的store.dispatch
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
context.commit('multiplication',payload);
resolve("asyncover");
},2000);
});
}
}
exportdefaultactions;
mutation.js
//vuex中的mutation
constmutations={
multiplication(state,payload){
state.count*=payload.amount;
}
}
exportdefaultmutations;
vue组件
methods:{
asyncMul(){
letamount={
type:'asyncMul',
amount:5
}
this.$store.dispatch(amount).then((result)=>{
console.log(result);
});
}
}
在另外一个action中组合action
action.js
//vuex中的action
constactions={
asyncMul(context,payload){
//返回promise给触发的store.dispatch
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
context.commit('multiplication',payload);
resolve("asyncover");
},2000);
});
},
actiona({dispatch,commit},payload){
returndispatch('asyncMul',payload).then(()=>{
commit('multiplication',payload);
return"asyncover";
})
}
}
exportdefaultactions;
mutation.js
//vuex中的mutation
constmutations={
multiplication(state,payload){
state.count*=payload.amount;
}
}
exportdefaultmutations;
vue组件
methods:{
actiona(){
letamount={
type:'actiona',
amount:5
}
this.$store.dispatch(amount).then((result)=>{
console.log(result);
});
}
}
使用async函数
action.js
//vuex中的action
constactions={
asyncMul(context,payload){
//返回promise给触发的store.dispatch
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
context.commit('multiplication',payload);
resolve("asyncover");
},2000);
});
},
asyncactionb({dispatch,commit},payload){
awaitdispatch('asyncMul',payload);
commit('multiplication',payload);
}
}
exportdefaultactions;
mutation.js
//vuex中的mutation
constmutations={
multiplication(state,payload){
state.count*=payload.amount;
}
}
exportdefaultmutations;
vue组件
methods:{
actionb(){
letamount={
type:'actionb',
amount:5
}
this.$store.dispatch(amount).then(()=>{
...
});
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。