Vue.jsでwatchを使ってページ遷移やstateの値の更新を監視する

Vue.js2021.1.26

最終更新日：2021.1.26 Update!!

Vue.jsではstateなどの値によってDOMを変更したり実行する処理を切り分けたりすることがあります。そのような場合には「watch」オプションを使うことでリアルタイムで値の変化や更新を監視することができ、そのタイミングで処理を実行することが可能です。今回は、特によく使われるようなケースであるページ遷移時やstateの値が更新された時に処理を実行する例を見ていきたいと思います。まず、watchオプションについてですが、下記にように関数を指定して、引数には対象となる値が入り、その関数内で監視した時に実行する処理を追記していきます。

watch: {
  function(変更後の値, 変更前の値) {
    // watchで監視した時に実行する処理
  }
}

記述する場所ですが、computedのオプションの後に書いていくようにします。それでは実際に実用例を見ていきます。

ページ遷移（routerの値の変更）を監視する

SPAではページがクライアント側で動的に生成されるため、都度HTTP通信が行われるわけではありません、そのためページの遷移はrouterの値を更新していくことになります。watchを使ってrouterの値の更新を監視することで、ページ遷移時に処理を実行させることが可能です。

export default {
  ......
  watch: {
    $route(to, from) {
      console.log({to});
      console.log({from});
      console.log('ページ遷移されました');
    }
  }
  ......
}

上記のtoとfromはそれぞれ$routeで取得できる値になります。実際に上記コードでページ遷移させると下記のようにページ遷移のタイミングで処理が実行されているのが確認できますね。

ページ遷移時にリセットさせる機能などに使えそうですね。それでは続いてstateの値を監視してみましょう。

stateの値が更新されて変わったことを監視する

続いて、stateの値が更新された時にwatchを使って、決まった処理を実行させる方法について見ていきます。まずはstoreにて、stateやmutations、actionsとgettersを用意しておきます。こちらについて詳しくは過去記事「Vue CLIとVuexでアプリケーションの状態変化を扱う」にもまとめていますのでご参考に。【store.js】

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    value: "before"
  },
  mutations: {
    mutateValue(state, payload) {
      state.value = payload;
    }
  },
  actions: {
    commitValue({ commit }, payload) {
      return commit('mutateValue', payload);
    }
  },
  getters: {
    value: (state) => state.value
  }
});

続いてテンプレート側で下記のようにボタンクリックでstateの値を更新していきます。クリックすると、storeで用意したactionsの処理が走って、stateの値が更新される仕組みです。watchではそのstateの値をgettersで取得して、値の更新が監視できるようにしています。【index.vue】

<template>
  <div>
    <button @click="update">更新する</button>
    <p>stateの値：{{ value }}</p>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['value']);
  },
  watch: { 
    value(val) {
      console.log('stateの値が変更されました');
    }
  },
  methods: {
    ...mapActions(['commitValue']),
    update() {
      this.commitValue('after');
    }
  }
}
</script>

これで実際に確認していきます、まずはボタンクリック前の状態で、stateの値も初期値となっており、watchでも監視されていないことがわかります。