分析vuex中mutation/action的传参方式

这篇文章主要为大家详细介绍了分析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(() => {
      ...
    });
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/5916-0.html

注：关于分析vuex中mutation/action的传参方式的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js