【Nuxt.js】InjectionKey

provide,injectを使用する際の型の渡し方。

InjectionKey不使用

//親コンポーネント
provide<型>(キー, 渡すデータ)
ex) provide<string>("hoge", foo)

//子コンポーネント
const a = inject<型>(キー)
ex) const a = inject<string>("hoge")

InjectionKey使用

//親コンポーネント
<script lang="ts">
  import { InjectionKey } from "vue";
  //Symbol("xxxx")で一意性の担保ができる
  export const key: InjectionKey<string> = Symbol("xxxx")
</script>

<script setup lang="ts">
  import { provide } from "vue"
  //ここで型を指定する必要がなくなる
  provide(key, "hoge")
</script>

//子コンポーネント
//ここで型を指定する必要がなくなる
//useKeyにはstring型の"hoge"が渡されている
const useKey = inject(key)

InjectionKeyの場合は同じキー名があっても上書きされないからより安全（エラーになるはず）

参考

tekrog.com