目录

 

说明：

1.官方例子

2.变体写法（传递一个参数）

3.传递多个参数（传递一个数组，推荐）

4.传递多个参数（传递一个对象）

总结：

---

说明：

因为mutations和actions不支持传递多个参数的，这里的参数又称“载荷”（Payload）。

例如：function(state, arg1, arg2, arg3) {} 是不支持的。下面是官方文档的截图。

为了使函数能够传递多个参数，可以通过传递一个对象或者数组的方式，变相实现需求。

下面循序渐进的介绍。

1.官方例子

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

2.变体写法（传递一个参数）

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state, param) => {
      console.log(param);
      state.count++;
    }
  },
  actions: {
    increment: ({ commit }, param) {
      commit('increment', param)
    }
  }
})

3.传递多个参数（传递一个数组，推荐）

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state, [param1, param2, param3]) => {
      console.log(param1);
      console.log(param2);
      state.count++
    }
  },
  actions: {
    increment: ({ commit }, [param1, param2, param3]) {
      commit('increment', [param1, param2, param3])
    }
  }
})

// 调用
this.$store.commit('increment', [1, 2, 3]);

4.传递多个参数（传递一个对象）

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: (state, data) => {// data = {param1: param1, param2: param2}
      console.log(data.param1);
      console.log(data.param2);
      state.count++
    }
  },
  actions: {
    increment: ({ commit }, data) {// data = {param1: param1, param2: param2}
      commit('increment', data)
    }
  }
})
// 调用
this.$store.commit('increment', {param1: 1, param2: 2});

总结：

可以看出，传递一个数组的方式 优于 传递一个对象的方式，写法上更加简洁，思路更加清晰。

网上搜索了不少，但清一色的都是介绍传递一个对象的方式，我这里记录一下。