@alexmixaylov

Как отследить изменения соседних компонентов Vue?

Приветствую, уважаемое сообщество!
Изучаю Вью и столкнулся с вопросом как можно отследить изменения в соседних компонентах
имеется компонент обертка, в котором вложены несколько потомков
один из них должен отслеживать изменения в остальных
что то типа того: есть составной ПРОДУКТ который имеет разные параметры
когда юзер меняет какие то параметры продукта - должна пересчитываться цена
this.$store.dispatch('calcPriceAction', params) - на сервер отсылается запрос, который по указаным параметрам находит цену
Компоненты тоже пишут в стор свои значения
если пытаюсь это запихнуть в компьютед, то скрипт зацикливается, постоянно отсылая запросы на сервер
потому что в сторе происходят изменения и компьютед получается должен изменить их
  • Вопрос задан
  • 546 просмотров
Пригласить эксперта
Ответы на вопрос 2
@ZeVeL
Добрый день!

А вы уверены, что вам нужен store для дочерних компонентов? Я бы лучше передавал данные из родителя в дочерние, используя :value="data", а обновление этих данных отлавливал через @input="recalculate". Тогда при каждом обновлении данных в дочерних компонентах будет вызываться функция recalculate, в которой можно сделать перерасчет как вам удобно.
Ответ написан
muzikant777
@muzikant777
PHP/Vue разработчик
Ну, давайте попробуем погадать на кофейной гуще.
Итак, есть некий компонент, при изменении одного из параметров в data которого нужно выполнять Vuex action, который, в свою очередь, должен установить некоторые параметры для другого/других компонетов.
Изменения логично отслеживать (сюрприз!) в watch:
export default {
  props: {
    paramType: {
      type: String
    },
    productId: {
      type: Number
    }
  },
  data () {
    return {
      param: 123
    }
  },
  watch: {
    param (value) {
      this.$store.dispatch('calcPriceAction', { productId: this.productId, paramType: this.paramType, value })
    }
  }
}


Код экшна calcPriceAction мне сложно представить, но, НАВЕРНОЕ, что-то вроде
calcPriceAction (context, { productId, paramType, value }) {
    const productApiService = context.getters.productApiService
    return productApiService.getPriceFor(productId, paramType, value)
      .then(price => {
        context.commit('setProductPrice', { productId, price })
      })
  }


Пользователь меняет значение параметра
-> экшн запрашивает цену по обновлённому значению параметра,
-> обновляет состояние
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы