Как во vue watch отслеживать состоние двух computed свойств через логичесвое И?

Question

[camradee]

То есть имеется свойство А и Б, надо чтобы watch сработал когда поменяется и А и Б. Если встроенной возможности такой нет то как бы можно было это обойти?

Answer 1

[camradee]

В итоге как сделал. Добавил 2 переменные состояния и объединил 2 свойства в одно compoundAB:

data () {
    return {
      stateAChanged: false,
      stateBChanged: false
    }
  },
  computed: {
    getA () {
     ....
    },
    getB () {
     ....
    },
    compoundAB() {
      return `${this.getA}|${JSON.stringify(this.getB)}`
    }
  }

Свойство B подразумевается в виде объекта. Watch сверяет переменные состояние и если true выполняется

watch: {
    compoundAB: function (newVal, oldVal) {
      const [oldA , oldB ] = oldVal.split('|');
      const [newA, newB] = newVal.split('|');

      if (oldA !== newA) {
        this.stateAChanged = true
      }
      if (oldB !== newB) {
        this.stateBChanged = true
      }
      if (this.stateAChanged && this.stateBChanged) {
        this.stateAChanged = this.stateBChanged = false
      }
    }
  },

Comments

[Влад Токарев]

В compoundAB проще отдавать [this.getA, this.getB]. А вотчеру отдавать параметр deep: true. Тогда не надо кусок с созданием строки, а потом с ее разбиением писать.

Answer 2

[Alex]

Внутрь watch вам передаются новые и старые значения ваших свойств. Просто проверяйте что оба новых значения не равно старым

Comments

[camradee]

если это простые типы данных легко. а если оба вложенные структуры данных? конечно тоже можно обойти их проверить, но дорогостоящая штука получается. Хотя можно в json строку закатать.