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

Я хотел бы динамически создать URL-путь для моего действия публикации 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.info(error)
    })
    .then(() => {
      commit('clearAddEditProduct')
    })
}

Я хотел бы заменить "5b5ca691e4f0d93c18e3f6d9" тем, что находится в состоянии

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

В частности, идентификатор продукта

Какие-либо предложения?

vue.js axios vuex

07.09.2018 01:19

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

4 514

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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)

Запрос на размещение теперь отправляет "$ {state.addeditproduct.id}" в качестве идентификатора. Подробнее см. В моем ответе. У меня есть образцы кода.

— 07.09.2018 02:25

@JakeMcCabe Вы использовали одинарные кавычки, но в моем ответе используются обратные кавычки, то есть `. См. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— 07.09.2018 02:30

07.09.2018 01:28