Vueのcomputedのgetter/setterでどこまでやっていいか
computedのgetter/setter、特に明記されていないがわりと色々なことができる。
わりと色々なことっていうか、普通にいろんなことができる。
算出プロパティなので、何らかの値を計算した結果をgetに設定するのはまあそうなんだけど、setterの中に色々な処理を書ける。
setterの中でemitしたり、setterの中で別の関数を呼んだり、別のrefの値を変更したり。
で、setterの中でどこまでやっていいのかというのがいまいちつかめていない。
算出setter関数のところにも、
算出プロパティはデフォルトでは getter 関数のみですが、必要に応じて setter 関数を設定することもできます
といった文と簡単なコードが書いてあるのみ。
setterを呼び出すときにnewValueを引数に取るので、そのnewValueをうまく有効活用する処理であればsetterに書いていいのか？
それとも少しでも処理が多くなったり複雑になったりするならwatchにまとめたほうがいいのか？
などなど、色々考えていた。
そんななか、Yuji Tsuburayaさんが似たようなツイートをして、そこでリプライでいくつか会話があった。
🤔 コード読んでたら computed プロパティで get / set 使ったコード出てきたんだけどこれってどういう場面で使うやつですか？（慣れてなくて挙動がイマイチピンと来てないんだけど、知らないだけで便利なのかな）
— Yuji Tsuburaya (@___35d) February 2, 2022
そしてうしろのこさんのツイートもあった。
Vuex stateは直接更新したくないが、stateはすべてVuexで管理したい→computed getterで参照してsetterでaction発行すればv-modelで使えるじゃん→inputがVuexと密にみたいな流れ
— うしろのこ (@ushiro_noko) February 2, 2022
しかし時代は移ろいローカルステート主義が覇権を握りました
なるほど、Vuexのactionの発行をsetterでやってしまおうというのがあったらしい。
まあそうなるとVuexと密になるのはたしかにと思う。いわゆる一般的なgetter/setterとしての役割以上のことをやろうとすると、どこかしらと密になったり、責任を持ちすぎたりしてしまうのかもしれない。