Vue.js watchを使って内部ステートを管理する

2018-02-01 #javascript  #vue.js 

Vueインスタンス間でデータを共有するとき、共有データとは別にそれをコピーした内部データも持ちたいときはwatchが使えるというメモ。

ドキュメントではcomputedとwatchの使い分け例として非同期処理の有無を紹介している。 https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

ただ、それだけではなくてwatchはインスタンスのデータプロパティの監視としても使うことができる(その名の通り)。 これは複数のVueインスタンスでデータを共有したい、でもインスタンス内部でそれをコピーしたプライベートデータも使いたい、という場合に便利だ。

実例

以下の例では共有データを模したglobalData、それをコピーしたprivateDataの2つのdataを設定している。 privateDataの方はglobalDataから独立して変更できるし、globalDataの変更にも追随するはずだ。

使い方

watch: {
  globalData: {    // watchするプロパティ名
    handler(val) {
      // 変更時の処理
    },
    deep: true    // Objectのプロパティの変更までwatchしてくれる
  }
}

というかここにいろいろ書いてある。
https://vuejs.org/v2/api/#watch

ドキュメントの読み込み大事。