Vue Axios 动态 URL

Posted 2023-03-28

【中文标题】Vue Axios 动态 URL

【英文标题】：Vue Axios Dynamic URL

【发布时间】：2019-02-12 06:12:12

【问题描述】：

我想在我的 vue.js 应用程序中为我的 axios 发布操作动态创建 URL 路径

下面是动作：

editProduct: function (dispatch, commit, payload) 
  axios
    .put('http://localhost:8081/product/5b5ca691e4f0d93c18e3f6d9', payload)
    .then(res => dispatch('loadProducts', res.data))
    .catch(function (error) 
      console.log(error)
    )
    .then(() => 
      commit('clearAddEditProduct')
    )

我想用状态中的任何内容替换“5b5ca691e4f0d93c18e3f6d9”

state:  // data
product: 
  name: '',
  description: '',
  externalid: '',
  active: '',
  id: ''

具体是产品 ID

有什么建议吗？

【参考方案1】：

使用传递给您的操作的上下文中的state。

例如

editProduct: function (dispatch, commit, state, payload) 
  // note the return below. This lets you compose actions
  return axios
    .put(`http://localhost:8081/product/$encodeURIComponent(state.product.id)`, payload)
     // etc

请参阅https://vuex.vuejs.org/guide/actions.html，尤其要注意Composing Actions 部分。

---

请注意，我使用 template literal 来格式化 URL 字符串。这相当于

'http://localhost:8081/product/' + encodeURIComponent(state.product.id)

【讨论】：

put 请求现在发送“$state.addeditproduct.id”作为 ID。有关更多详细信息，请参阅我的答案。我那里有代码示例。

@JakeMcCabe 您使用了单引号，但我的回答使用了反引号，即`。见developer.mozilla.org/en-US/docs/Web/javascript/Reference/…