【TypeScript】vuex-module-decoratorsを使うときに気をつけたいこと

f:id:ShowGoTagami:20191104123954j:plain

Vuex + TypeScriptを実現するにあたって、vuex-module-decoratorsの採用は2019年現在最適解な気がします。

vuex-module-decoratorsは端的に言えば、TypeScriptでVuexを書くためのパッケージ

導入方法、細かい書き方は以下の記事が詳しいです。

この記事だと、ちょっとアレだなと思ったのが以下の２点。

@Module
class Hoge extends VuexModule {
　private count: number = 0;
 
~省略~

こうすべきですね。

きちんとアクセス修飾子のprivate をつけましょう。VuexModuleのClass内からしかアクセスできないようにすべきですね。StoreのStateなので。

@Module
class Hoge extends VuexModule {
　private count: number = 0;
　
　public get totalCount(): number {
　　return this.count + 10;
　}
}

一方こちらはgetterなので、Class外からもアクセスされます。public get にしましょう。

でもここで疑問なのが...

なんで @Getter 、@Stateがないねん。

@Action　ある

@Mutation　ある

@Getter ない

なんでやねん。

おそらくは、上述の通り書くことができるので、@Getterいらんやろ、ということでしょうか...。

VuexそのものはJavaScriptで書かれることを想定しているので、TypeScriptを導入したら一工夫が必要。2019年現在はvuex-module-decoratorsが良さげ。

でも、getterとstateの書き方は気をつけようね、ということでした。