【Nuxt.js/Vue.js】storeの配列をcomputedでキャッチしようとしてハマった話【覚書】

【Nuxt.js/Vue.js】storeの配列をcomputedでキャッチしようとしてハマった話【覚書】

はじめに

コジマです。

発信の場がプラットフォーム依存だと炎上するかもしれないけど、個人ブログなら安心ですね(?)
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の監視対象の配列を使用して更新する必要がある!
ということですね!

さいごに

今回の話は

配列の要素の更新をcomputedでキャッチさせたい時はspliceを使おう!

ということでした。

こういったことを理解した上で実装するのと、なんとなく実装するのとでは大きく違いますよね。
今後もこういう小ネタストックしていきます。

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


Vue.js/Nuxt.jsカテゴリの最新記事