watch()でオブジェクト配列の値を複数監視する

オブジェクト配列が二つあり、その二つの値をwatch()を使って監視する際にコンパクトに書く書き方を発見したので記載します。

定数

const stateA = reactive({
    id: 1,
    name: Tanaka,
    checked: true,
    checkList: []
});

const stateB = reactive({
    id: 2,
    name: Suzuki,
    checked: true,
    checkList: []
});

const plainOptionsA = ["A","B","C"]
const plainOptionsB = ["A","B","C","D","E","F"]

watch()を複数使ってもエラーは出ないですが、コードが無駄に長くなってしまいます。

before

watch(
  () => stateA.checkedList,
  val => {
      // データが変化した時に行いたい処理
      stateA.checked = val.length && val.length < plainOptionsA.length;
  }
)
watch(
  () => stateStateB.checkedList,
  val => {
      // データが変化した時に行いたい処理
      stateB.checked = val.length && val.length < plainOptionsB.length;
  }
)

監視する値を配列に入れることでそれぞれの値のnewとoldを取得でき、{}内でそれぞれの監視対象の値を利用することができます。

after

watch(
  () => [stateA.checkedList, stateB.checkedList]
  ([valAnew, valBnew],[_valAold,_valBold] => {
      // データが変化した時に行いたい処理
      stateA.checked = valAnew.length && valAnew.length < plainOptionsA.length;
      stateB.checked = valBnew.length && valBnew.length < plainOptionsB.length;
  }
)

まとめた方がスッキリとして視認性が上がるので、まとめて書きましょう！