Vue 2.7 + TypeScript で Vuex を使う場合、型安全に store の state
や getters
などへアクセスするために、
useStore
という 型付きのコンポーザル関数 (composable function) を自作する必要があります。
これは、store
を取得する関数に「自分の Store 型」を教えてあげるイメージです。
useStore
, useAuth
, useUser
などuse
で始まるのが慣習🥕 例えるなら、レゴブロックを作る関数です。
必要なパーツ(ロジック)だけ組み合わせて再利用できる感じ。
Vuex は本来、this.$store
でアクセスしますが、
Composition API では useStore()
でアクセスします。
ですが、useStore()
のデフォルトは型が any
になってしまう。
→ なので「自分の Store 型」を教えてあげないと、
state.count
とかが型安全に書けない。