VuexのTS対応についてメモる板
meijin議題
▼質問
最近業務でNuxtを触るようになったのですが、VuexのTS対応ってどうされてますか？
こちらの記事なんかを読んだりして多少リサーチはしてみたのですがいまいち判断の決め手に欠けまして。
そもそもcomposition-apiの登場でVuexをメインで使っていく必要があるのかどうかも分かっていないのでmeijinさんがNuxtの状態管理をどう運用しているのか概要を教えて頂きたく…
meijin全体感
Vuexのメリデメ
▼メリット
Vuexは状態管理がフレームワークになっているのがメリット。読みやすい
▼デメリット
バンドルサイズ肥大化
TypeScript対応※後述
最低限必要な手続きの多さ（Storeファイル作成、State、Action、Mutation個別に作成）
ささいな状態管理で四苦八苦しないためにHookを使う
保存ボタンを押したら保存されてデータがFetchしなおす、程度の簡単なアクションとStateの更新でVuexを使うのは大げさ。こういったケースではHookを使うのがベター
単体テストもめっちゃ書きやすいというのもメリットです
全体的な見解
いちサービスのなかでVuexとHooksを併用してもOKだと思う。むしろHookを使っているということは簡単な状態管理だ、Vuexを使っているなら複雑な要件だ、と見分けがついて読みやすくなる可能性がある？
meijinVuexのTS対応
vuex-module-decoratorsを使っているが後悔しています。
デコレータを書かせるのが手間がかかります。重いライブラリに重いラッパーを噛ますのは筋が悪いと思う。
いまやるならTyped Vuexを使うかなぁ
ただ、重要なポイントとして、Vuex4がそもそもTS対応しているというのはあるみたいなので、ラッパーを使わなくていい可能性はある
追記
Vuex公式でできるのが一番なので、それが（composition-api入れれないとかで）できないのであればできるようになるまでJavaScriptで書くのがいいんじゃないですかね、と思います。
ラッパー入れて外すのが面倒になるとただでさえVue3移行大変なのに余計な手間が増えそう。
なのでTS対応どうしよう、答えが市場に見当たらないなと思っている時点で、基本的には公式が対応するのを待つほうがいい、2年前とかならともかくVuex4が出てきているなら間近なのでcomposition-apiやVue3対応を進めるのを優先したほうがいい気がします
meijin追記：複雑な状態管理とはどういう状況か
自社でチャット機能を開発しているのですが、チャット画面ってけっこうやること多いんですよね
- 画面左の部屋一覧で部屋を切り替える
- 切り替えるとメッセージ一覧がローディングされ、表示し直し
- 画面右では部屋の情報が表示、編集できる。ここももちろん部屋を切り替えると変わる
- テキストのやり取りだけでなく、画像やファイルのやりとりもできる。そして画像やファイルだけをフィルタリングして一覧にできる機能もある
- 既読機能がある
- メッセージを描画するときにそのメッセージがどのタイプのメッセージなのかや、連投しているときの最後のメッセージだったらアイコンを表示するなど細かいデザイン要件があるためメッセージの配列に対してmapでConvertを掛ける必要がある
これくらいの内容を僕は頑張ってHookで書いたのですが、正直しんどくなってしまったのでここまでくるとVuexかなと。
そうでなければVuexはオーバーキルだし、さらにそのうえに自己満足でTSを噛ますのはやりすぎ感がありますかね。
ちなみにHookで頑張るならReactでいうところのuseReducer作りますかね。StateとActionをしっかり切り分けて考えないとごちゃごちゃします。最近考えているところです。