Vue Axios Динамический URL

Question

Я хотел бы динамически создать путь URL для моего действия post axios в моем приложении vue.js

Вот действие:

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: ''
}

Конкретно идентификатор продукта

Есть предложения?

Answer 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 и, в частности, обратите внимание на раздел Составные действия .

---

Обратите внимание, что я использую шаблонный литерал для форматирования строки URL. Это эквивалент

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