axios 在 vuex 操作中发布具有多个参数的请求

Question

在 vuex action 中使用 axios 获取 API 数据：

actions: {
login ({commit}, payload) {
  axios.post(globalConfig.TOKEN_URL, {
    payload
  })
    .then((resp) => {
      commit('auth_success', resp.data)
    })
    .catch((err) => {
      console.log(err)
    })
},
}

组件发送数据的方法：

methods: {
  authChatClient () {
    let payload = {
      name: this.clientFio,
      number: this.clientNumber
    }
    this.$store.dispatch('login', payload)
  },
}

但是它不起作用，因为有效负载是一个对象，包装在有效负载对象中。是否可以将组件方法中的多个参数发送到 vuex 操作？

发布请求如下所示：payload: {name: "aaa", number: "111"}

Answer 1

Vuex 只允许对一个动作使用 1 个参数。但是，如果我正确理解您的问题，您可以将多个参数发送到一个 vuex 操作（如果它们包装在一个对象中）。示例：

login({commit}, {name, number /*, ...more here*/}) {
    axios.post(globalConfig.TOKEN_URL, {
        name: name,
        number: number,
        /* more parameters here */
    })
    /* ... */
}

你可以这样称呼它：

methods: {
  authChatClient () {
    let payload = {
      name: this.clientFio,
      number: this.clientNumber,
      /* more parameters */
    }
    this.$store.dispatch('login', payload)
  },
}