はじめに
コジマです。
発信の場がプラットフォーム依存だと炎上するかもしれないけど、個人ブログなら安心ですね（？）
wordpressごと炎上しないように祈ります
今回はNuxt触ってる時にハマった話をしようと思います。
何をしようとしていたのか
storeのstateがmutationによって変更された時に
computedが実行されるようにしたかったのです。
配列に対してそれをしたかったのだけど、
要素を追加したり削除した時は動くのに、値の更新をした時だけはなぜか動かなかったのです。
画面が更新されてほしいのに〜更新されない。。。
って唸っていたので調べました。
原因と対処
mutationの中で配列を
array[i] = element
みたいに処理しようとしてました。
しかし、これだとstoreの更新はされるけどcomputedがキャッチしてくれないです。
そこで、spliceを使用して配列を差し替えることによって対応します。
array.splice(index, 1, splice)
こうすることでcomputedがキャッチしてくれるようになります。
ちょっとした解説
下記リンク先に全てが書いてありました。
一部引用する形で紹介いたします。
https://jp.vuejs.org/v2/guide/list.html#%E9%85%8D%E5%88%97%E3%81%AE%E5%A4%89%E5%8C%96%E3%82%92%E6%A4%9C%E5%87%BA
Vueでは、監視された配列の変更メソッドを抱合していて、そのメソッドを使用することで画面の更新のトリガーが実行されます。
抱合されたメソッドは以下の通り。
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
また、Vueでは以下の変更を検出することができません。
- インデックスでアイテムを直接設定するとき。例: vm.items[indexOfItem] = newValue
- 配列の長さを変更するとき。例: vm.items.length = newLength
太字にしているは、本記事でハマった事象とその対処に該当するものになります。
DOMに変更を与えたい時は要素を直接更新するのではなく、Vueの監視対象の配列を使用して更新する必要がある！
ということですね！
さいごに
今回の話は
ということでした。
こういったことを理解した上で実装するのと、なんとなく実装するのとでは大きく違いますよね。
今後もこういう小ネタストックしていきます。
この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！
以上、コジマでした。
