mutationを用いようとしたとき、インテリセンスが効かない、型安全が保たれないといった問題に直面する。これらを解決する策としてサードパーティー製のパッケージvuex-module-decoratorsを用いたのでここに記す。mutationでせっかく型指定をしても型安全を保てない。});これをコンポーネントで呼ぼうとすると、次のようになってしまう。vuexをtypescriptで扱おうとすると型が守られない、インテリセンスが効かない状態になり、非常に使い辛い。型は何でも渡せてしまう。このcounterにはインテリセンスが効かない。}vuex-modules-decoratorを用いて無敵になるvuexのmoduleをクラス化して、そのインスタンスをコンポーネントでそれを引っ張り出すことによってインテリセンスを効かせるサードパーティー製のライブラリを導入する。stateのネストが一階層さがるのもいい。actions内で簡単にthisからmutationを呼び出せる。getModule(Counter);storeはvuexのstoreを示しており、このモジュールがどのstoreに属しているのかを@Moduleで明示的に示す必要がある。moduleがclass化されたので、それぞれのメソッドの中でthisを使ってお互いを呼び出すことができる。優れている点がactionsでのmutationの呼び出しである。SET_INCREMENT_COUNTERは、引数にnumber型の値を要求しており、コンポーネントやactionsで呼び出したときも、vuexでの型チェックがしっかり行われることがわかる。←なんでも受け付けるこのような書き方になり、型チェックができなかった。←numはnumber型でないとエラーを吐くコンポーネントでの呼び出しコンポーネントではgetModuleでオブジェクト化されたクラスをimportする。}コンポーネントではモジュールクラスをインポートすればインテリセンスが効きまくり無事無敵になる。して人類はactionsやgettersを呼ぶときに一字一句間違えず変数名を書くことや、手動で名前空間用の変数名格納ファイルを作ることから解放された。actions、全てをモジュール単位で一つのクラスに格納するので名前に明確なルールを敷かないと大きなモジュールになった際、どれがどれだかわからなくなり困ることは明白。名前にルールを敷いて解決するのがベター。個人的にmutationとgettersはスネークケースのSET,GET始まりの名前で、actionsはmethodだからキャメルケースで自由。stateもキャメルケースで自由。いった構成がわかりやすくていいじゃないかと思う。MutationActionsについてデコレータMutationActionsを用いればデコレータ内で宣言されているstateに対してcommitを一気に行うことができる。returnにJSON形式でmutateする値を指定することができる。上のコードでもカウンターをリセットするためのものとして用意してみた。}これはこれで便利だが、どうしてもstateを文字列指定してしまっているし、返り値のJSON形式の型チェックまで行われない。そのため、incrementCounterもdecrementCounterもnumber型と明記されているが、べつに何を入れてもエラーが出ない。便利だがこの辺は割と残念なところだ。MutationActionは便利だが極力使わないようにするほうがいい、というのが持論。typescriptの開発は悩んでいる人が多く、型安全性とインテリセンスに困らされる人がまだ多い印象だ。mapGettersから完全に手をひくことができたのでとても感謝している。私が調べた当時qiitaの記事に、vuex-module-decoratorsの紹介がなかったことは非常に残念なことで、もし悩んでる人がいたらその助けになれれば幸いだ。upLoginユーザーは見つかりませんでした。