要点まとめ

Vue 2.7 + TypeScript で Vuex を使う場合、型安全に store の stategetters などへアクセスするために、

useStore という 型付きのコンポーザル関数 (composable function) を自作する必要があります。

これは、store を取得する関数に「自分の Store 型」を教えてあげるイメージです。


詳しく説明します

そもそも「コンポーザル関数」とは?

🥕 例えるなら、レゴブロックを作る関数です。

必要なパーツ(ロジック)だけ組み合わせて再利用できる感じ。


なぜ必要?

Vuex は本来、this.$store でアクセスしますが、

Composition API では useStore() でアクセスします。

ですが、useStore() のデフォルトは型が any になってしまう。

→ なので「自分の Store 型」を教えてあげないと、

state.count とかが型安全に書けない。


どんな感じのコードになる?