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

时间:2018-11-28 10:17:56

标签: vue.js axios vuex

在vuex动作中使用axios获取API数据:

from django.forms import modelformset_factory

ProductFormset = modelformset_factory(
    productInfo,
    fields=('productName', ),
    extra=5,
    widgets={'name': forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Enter product Name here'
        })
    }
)

组件的数据发送方法:

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

但是,它无效,因为有效负载是一个对象,包装在有效负载对象中。是否可以将多个参数从组件的方法发送到vuex动作?

发布请求看起来像这样:methods: { authChatClient () { let payload = { name: this.clientFio, number: this.clientNumber } this.$store.dispatch('login', payload) }, }

1 个答案:

答案 0 :(得分:5)

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)
  },
}