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

Posted 2023-03-28

【中文标题】axios 在 vuex 操作中发布具有多个参数的请求

【英文标题】：Axios post request with multiple parameters in vuex action

【发布时间】：2019-04-30 05:18:26

【问题描述】：

在 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"

【问题讨论】：

你有错误或Axios返回的东西吗？

这与 axios 抛出的错误无关，我使用的 API 旨在接收以下样式的参数："name": "string", "phone": "string"

【参考方案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)
  ,

【讨论】：

我什么都试过了，除了解构参数，谢谢。但是为什么 vuex 动作默认不接受多个参数呢？我用错了吗？

并不是 Vuex 的动作默认不接受多个参数，而是总是。问题是，如果您使用对象销毁，从技术上讲，您只传递了 1 个参数，即对象本身，因此 Vuex 很高兴。至于您的用法，您并没有用错，因为我看到很多人都这样使用它，包括我自己。

也请您解释一下，为什么当我在 axios 的请求中设置不同的键名时，例如：name: name, phone: number，它只是在发布请求时省略了电话号码？

你能显示相关代码吗？我自己对 axios 没有太多经验，但我很乐意看看