Vue Axios 동적 URL

Vue Axios 동적 URL

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

좋은 의견이라도 있나?

를 사용합니다.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 섹션을 참조하십시오.

---

템플릿 리터럴을 사용하여 URL 문자열 형식을 지정합니다.이것은 에 상당합니다.

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

언급URL : https://stackoverflow.com/questions/52213240/vue-axios-dynamic-url