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

Question

[Александр]

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

Comments

[0xD34F]

Это правильно, что вы не стали показывать код - так сразу видно, что на самом деле никакой ответ вам не нужен, и можно смело проходить мимо.

Answer 1

[ZeVeL]

Добрый день!

А вы уверены, что вам нужен store для дочерних компонентов? Я бы лучше передавал данные из родителя в дочерние, используя :value="data", а обновление этих данных отлавливал через @input="recalculate". Тогда при каждом обновлении данных в дочерних компонентах будет вызываться функция recalculate, в которой можно сделать перерасчет как вам удобно.

Comments

[Александр]

Стор проще всего сделать наверное
потому что там все взимосвязанно, некоторые компоненты имеют в себе вложенных потомков
шаблон пререрисовывается динамически
и потом мне нужно использовать данные из стора, чтоб записать их в базу

суть задачи такова - при изменениях(некоторых) в компонентах - запустить метод в "соседе"

Answer 2

[Андрей Седышев]

Ну, давайте попробуем погадать на кофейной гуще.
Итак, есть некий компонент, при изменении одного из параметров в 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 })
      })
  }

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