Axios post request with multiple parameters in vuex action

Question

Fetching API data with axios in vuex action:

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

Component's method for sending the data:

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

However it won't work, since payload is an object, wrapped in a payload object. Is it possible to send multiple parameters from component's method to a vuex action?

Post request is looking like this: payload: {name: "aaa", number: "111"}

It's not about the errors axios throws, i'm using an API that designed to receive params in the following style: {"name": "string", "phone": "string"} — Alexander Kim

T. Dirks T. Dirks · Accepted Answer · 2018-11-28T10:28:02

Vuex only allows the use of 1 parameter to an action. However, if I understand your question correctly, you can send multiple parameters to a vuex action if they are wrapped in an object. Example:

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

And you can call it with:

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

Axios post request with multiple parameters in vuex action

1 Answers