详解vuex中mutation/action的传参方式
发布时间：2020-12-17 02:15:12 所属栏目：百科 来源：网络整理
导读：前言 在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。 是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置
前言在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。 是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下 export default state;
mutation传参朴实无华的方式 mutation.js {
//n是从组件中传来的参数
state.count += n;
}
}
export default mutations; vue组件中（省去其他代码） 对象风格提交参数mutation.js {
state.count -= payload.amount;
}
}
export default mutations; vue组件 action传参朴实无华 action.js export default actions;
mutation.js {
state.count += n;
}
}
export default mutations; vue组件 对象风格action.js export default actions;
mutation.js {
state.count -= payload.amount;
}
}
export default mutations; vue组件 action的异步操作突然就想总结一下action的异步操作。。。。 返回promiseaction.js {
setTimeout(() => {
context.commit('multiplication',payload);
resolve("async over");
},2000);
});
}
}
export default actions; mutation.js export default mutations;
vue组件 {
console.log(result);
});
}
}
在另外一个 action 中组合actionaction.js {
commit('multiplication',payload);
return "async over";
})
}
}
export default actions; mutation.js export default mutations;
vue组件 {
console.log(result);
});
}
}
使用async函数action.js export default actions;
mutation.js export default mutations;
vue组件 {
...
});
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |