vuex下如何用mutation或action传参

这篇文章主要介绍了vuex下如何用mutation或action传参的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vuex下如何用mutation或action传参文章都会有所收获，下面我们一起来看看吧。

前言

在vuex中提交 mutation 是更改状态的唯一方法，并且这个过程是同步的，异步逻辑都应该封装到 action 里面。对于mutation/action，有一个常见的操作就是传参，也就是官网上说的“提交载荷”。

这里是关于如何在vue-cli中使用vuex的方法，我们采用将vuex设置分割成不同模块的方法。其中，state模块中配置如下

//vuex中的stateconst state = {  count: 0}export default state;

mutation传参

朴实无华的方式

mutation.js

//vuex中的mutationconst mutations = {  increment: (state,n) => {    //n是从组件中传来的参数    state.count += n;  }}export default mutations;

vue组件中（省去其他代码）

methods: {  add(){    //传参    this.$store.commit('increment',5);  }}

对象风格提交参数

mutation.js

//vuex中的mutationconst 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中的actionconst actions = {  increment(context,args){    context.commit('increment',args);  }}export default actions;

mutation.js

//vuex中的mutationconst mutations = {  increment: (state,n) => {    state.count += n;  }}export default mutations;

vue组件

methods: {  adda(){    //触发action    this.$store.dispatch('increment',5);  }}

对象风格

action.js

//vuex中的actionconst actions = {  decrementa(context,payload){    context.commit('decrementa',payload);  }}export default actions;

mutation.js

//vuex中的mutationconst 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中的actionconst 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中的mutationconst 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中的actionconst 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中的mutationconst 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中的actionconst 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中的mutationconst 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传参”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vuex下如何用mutation或action传参”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。