13518219792
这篇文章将为大家详细讲解有关vuex中怎么利用mutation或action传参，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
前言
在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。
这里是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下
//vuex中的state
const state = {
count: 0
}
export default state;mutation传参
朴实无华的方式
mutation.js
//vuex中的mutation
const mutations = {
increment: (state,n) => {
//n是从组件中传来的参数
state.count += n;
}
}
export default mutations;vue组件中（省去其他代码）
methods: {
add(){
//传参
this.$store.commit('increment',5);
}
}对象风格提交参数
mutation.js
//vuex中的mutation
const mutations = {
decrementa: (state,payload) => {
state.count -= payload.amount;
}
}
export default mutations;vue组件
methods: {
reducea(){
//对象风格传参
this.$store.commit({
type: 'decrementa',
amount: 5
});
},
}action传参
朴实无华
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(){
//触发action
this.$store.dispatch('increment',5);
}
}对象风格
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的异步操作
突然就想总结一下action的异步操作。。。。
返回promise
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise给触发的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给触发的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函数
action.js
//vuex中的action
const actions = {
asyncMul(context,payload){
//返回promise给触发的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(() => {
...
});
}
}关于vuex中怎么利用mutation或action传参就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
