Вызов функции один раз в компоненте VUE при срабатывании watch?

Question

[ByJumping]

Привет!

У меня есть компонент, который принимает один и тот же массив объектов, но этот компонент отрисовывается 2 раза на странице.

<EmployeesFilterRisks
            filter-name="risk_ids_1"
            :risks="filterRisksByType(storeRisks.risks, [1])"
            :label="props.col.label"
            v-else-if="props.col.name === 'open-risks'"
          />
          <EmployeesFilterRisks
            filter-name="risk_ids_2"
            :risks="filterRisksByType(storeRisks.risks, [2, 3])"
            :label="props.col.label"
            v-else-if="props.col.name === 'other-risks'"
          />

В этом компоненте создаю watch

watch(
  () => storeRisks.isClearRisk,
  () => {
    onRisk(storeRisks.isClearRisk);
  },
  { deep: true }
);

Соответственно, когда в сторе меняется storeRisks.isClearRisk, функция onRisk(storeRisks.isClearRisk) вызывается 2 раза, потому что сам компонент дважды в темплейте отрисовывается.

Как сделать так что бы функция onRisk(storeRisks.isClearRisk) срабатывала только 1 раз при изменении данных?

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

Answer 1

[ByJumping]

Сработало в итоге так -

if (storeRisks.isClearRisk.type === 1 && props.filterName === 'risk_ids_1') {
      onRisk(storeRisks.isClearRisk);
    } else if (storeRisks.isClearRisk.type !== 1 && props.filterName === 'risk_ids_2') {
      onRisk(storeRisks.isClearRisk);
    }

Но это ужастно конечно выглядит, но по другому не придумал как обойти эту проблему, либо так либо саму функцию onRisk нужно было както менять

Answer 2

[Иван]

Возможо

watch(
  () => storeRisks.isClearRisk,
  (newValue, oldValue) => {
    if (newValue) {
      onRisk(newValue);
    }
  },
  { immediate: true }
);

или

let isRiskHandled = false;

watch(
  () => storeRisks.isClearRisk,
  (newValue) => {
    if (!isRiskHandled) {
      onRisk(newValue);
      isRiskHandled = true;
    }
  }
);

Comments

[ByJumping]

пробовал, так тоже не вышло, в итоге сработало с костылем типо -

if (storeRisks.isClearRisk.type === 1 && props.filterName === 'risk_ids_1') {
      onRisk(storeRisks.isClearRisk);
    } else if (storeRisks.isClearRisk.type !== 1 && props.filterName === 'risk_ids_2') {
      onRisk(storeRisks.isClearRisk);
    }