Vue3 & InjectionKey 的作用、使用

前提：
1、还没用过 provide/inject 函数的同学可以先看下 provide / inject 的用法、作用
2、本文假设读者已使用过 TypeScript

1. 什么是 InjectionKey

在 Vue3 中使用 TS 时，父组件通过 provide 函数注入的数据类型往往是未知的，而子组件调用 inject 引入数据时也无法确定具体的数据类型是什么，这就产生了可维护性问题，比如某位同事写了下面这段代码时

import { inject } from "vue"
inject('Colors');

对于 colors 导数的数据类型我们并不知道是什么，它可以是对象 or 数组亦或是字符串，只能顺瓜摸藤找到它的 provide，对于小项目找一下可能不花费什么时间，但对于大型项目来说很明显是不可取的，于是官方提供了 InjectionKey 函数来对传参进行类型约束，确保父子间传递的数据类型是可见、透明的。

InjectionKey 函数的使用也很简单，原理是需将 provide 与 inject 的第一个参数即 key 通过声明 sysmbol 的方式关联起来即可，具体使用方式看下面。

2. InjectionKey 的使用方式

// 1. 将 InjectionKey 定义的数据类型放到 keys/index.ts 下维护
// keys/index.ts
import {InjectionKey, Ref } from "vue"
// 限制了 provide 导出的数据必须是 ref 且 boolean 类型
export const showPopupKey: InjectionKey<Ref<boolean>> = Symbol()
// 限制了 provide 导出的数据必须是 string
export const titleKey: InjectionKey<string> = Symbol()

// 2. 在 A .vue 文件中调用 provide 导出数据，第一个参数则是我们上面定义好的数据类型，第二个参数是对应数据类型的值
import { provide, InjectionKey, Ref } from "vue"
import { showPopupKey } '@/keys'
const showPopup = ref(false)
// 正确
provide(showPopupKey, showPopup) 
// TS 报错： 'Hello' 是字符串，与 showPopupKey 不匹配
provide(showPopupKey, 'Hello')
// 正确
provide(titleKey, 'Hello')

// 3. 在 B.vue 文件中导入数据
import { showPopupKey } from '@/keys'
import { inject } from 'vue'
inject(showPopupKey) // 现在获取到的数据类型是安全的

有了 InjectionKey 函数后就不用再担心 provide&inject 之间的数据类型问题了，我们只需找到 InjectionKey 关联的 key 即可，
通常情况下，InjectionKey 定义的 key 数据类型都会单独放到 keys 目录维护，便于其它组件复用。

完！