Nuxt.js watchで値を監視する

どういう時につかうか？

何かを監視しておき、その値が変わったらなにか処理をしたい、メソッドを発火させたいなど。

ちなみに値を帰す処理の場合はcomputed,そうでない場合はwatchを使うそうです。

watch の使い方
dataで用意されているものなら何でも監視できる

 data () {
   return {
     src: 'https://picsum.photos/200/200',
     isIndex: true,
     posts: [],
   

この中のpostsというデータを監視したいとすれば

watch: {
   posts (val) {
     console.log('postsの値が変わりました')
     console.log(val)
   }
 },こ

これで監視することができます。

postsは引数が取れてその中にはpostsの値が入ります。

今回はvuexの値を監視したかったため

computed: {
   ...mapGetters({
     btnColor: 'btn/color',
     currentUser: 'auth/data',
     currentUserId: 'auth/currentUserId',
     isAuthenticated: 'auth/isAuthenticated',
     submitPost: 'post/submitPost'
   })

mapGettersの中のsubmitPostを監視してほしかったら

submitPost (val) {
     console.log('stateの値が変わりました')
     console.log(val)
     //valはstateの中身
     //ここでメソッドを呼んだり、条件分岐もできる
   }

これでvuexの値が変わった瞬間に処理をすることができます。

watchを使いこなすことで今後処理をしやすくなりそうなので便利な機能だなと感じました。