VueUse 学习 —— createInjectionStatecreateInjectionState 是 Vue

createInjectionState 是 Vue 3 组件库 VueUse 中提供的一个函数，用于创建可注入到组件中的状态对象。它的作用类似于 Vue 2 中的 mixin，可以将状态注入到组件的 data 中，或者注入到 setup 函数中。

具体来说，createInjectionState 接收一个工厂函数作为参数，返回一个 InjectionKey，这个 key 可以被用于 provide/inject API 来注册和获取状态。

使用 createInjectionState 创建的状态可以被应用于多个组件，这些组件可以通过 inject API 来获取并使用这些状态。在注入到组件中时，可以指定默认值，也可以通过 provider 注入新值来覆盖默认值。

这个函数的作用是方便地在多个组件之间共享状态，并且可以避免直接使用全局变量的副作用。

源码分析

源码如下：

import { type InjectionKey, inject, provide } from 'vue-demi'

/**
 * Create global state that can be injected into components.
 *
 * @see https://vueuse.org/createInjectionState
 *
 */
export function createInjectionState<Arguments extends Array<any>, Return>(
  composable: (...args: Arguments) => Return,
): readonly [useProvidingState: (...args: Arguments) => Return, useInjectedState: () => Return | undefined] {
  const key: string | InjectionKey<Return> = Symbol('InjectionState')
  const useProvidingState = (...args: Arguments) => {
    const state = composable(...args)
    provide(key, state)
    return state
  }
  const useInjectedState = () => inject(key)
  return [useProvidingState, useInjectedState]
}

createInjectionState 函数通过提供一个组合函数 composable，返回一个由 useProvidingState 和 useInjectedState 两个函数组成的元组。

useProvidingState 函数的作用是提供组件状态，接受 composable 函数的参数作为输入，并通过 provide 函数将组件状态绑定到 InjectionKey 上，返回状态对象。
useInjectedState 函数的作用是获取组件状态，通过 inject 函数从 InjectionKey 上获取组件状态对象，如果没有绑定则返回 undefined。

通过这种方式，我们可以方便地在多个组件中共享相同的状态对象，而不需要通过 props 或事件总线来进行通信。使用 InjectionKey 也提高了代码的可读性和可维护性。