feat(createInjectionState): add injectionKey option (#3404)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/shared/createInjectionState/index.md

@@ -106,3 +106,30 @@ const { increment } = useCounterStore()!
   </button>
 </template>
 ```
+
+## Provide a custom InjectionKey
+
+
+```ts
+// useCounterStore.ts
+import { computed, ref } from 'vue'
+import { createInjectionState } from '@vueuse/shared'
+
+// custom injectionKey
+const CounterStoreKey = 'counter-store'
+
+const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
+  // state
+  const count = ref(initialValue)
+
+  // getters
+  const double = computed(() => count.value * 2)
+
+  // actions
+  function increment() {
+    count.value++
+  }
+
+  return { count, double, increment }
+}, { injectionKey: CounterStoreKey })
+```

packages/shared/createInjectionState/index.test.ts

@@ -1,48 +1,81 @@
-import { defineComponent, h, ref } from 'vue-demi'
+import { type InjectionKey, type Ref, defineComponent, h, inject, ref } from 'vue-demi'
 import { createInjectionState } from '@vueuse/shared'
 import { describe, expect, it } from 'vitest'
 import { mount } from '../../.test'
 
-const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
-  const count = ref(initialValue)
-  return count
-})
+describe('createInjectionState', () => {
+  it('should work 1', () => {
+    const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
+      const count = ref(initialValue)
+      return count
+    })
 
-const ChildComponent = defineComponent({
-  setup() {
-    const count = useCountState()
-    expect(count?.value).toBe(0)
+    const ChildComponent = defineComponent({
+      setup() {
+        const count = useCountState()
+        expect(count?.value).toBe(0)
 
-    return () => h('div')
-  },
-})
+        return () => h('div')
+      },
+    })
 
-const RootComponent = defineComponent({
-  setup() {
-    useProvideCountState(0)
+    const RootComponent = defineComponent({
+      setup() {
+        useProvideCountState(0)
 
-    return () => h(ChildComponent)
-  },
-})
+        return () => h(ChildComponent)
+      },
+    })
 
-describe('createInjectionState simple example', () => {
-  it('should work', () => {
     mount(RootComponent)
   })
-})
 
-const CanProvidingStateAndInjectedStateInSameComponent = defineComponent({
-  setup() {
-    useProvideCountState(114514)
-    const count = useCountState()!
-    expect(count.value).toBe(114514)
+  it('should work (custom key)', () => {
+    const KEY: InjectionKey<Ref<number>> = Symbol('count-state')
 
-    return () => h('div')
-  },
-})
+    const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
+      const count = ref(initialValue)
+      return count
+    }, { injectionKey: KEY })
+
+    const ChildComponent = defineComponent({
+      setup() {
+        const count = useCountState()
+        expect(count?.value).toBe(0)
+        const count2 = inject(KEY)
+        expect(count2?.value).toBe(0)
+
+        return () => h('div')
+      },
+    })
+
+    const RootComponent = defineComponent({
+      setup() {
+        useProvideCountState(0)
+
+        return () => h(ChildComponent)
+      },
+    })
+
+    mount(RootComponent)
+  })
+
+  it('allow call provideLocal and injectLocal in same component', () => {
+    const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
+      const count = ref(initialValue)
+      return count
+    })
+
+    const CanProvidingStateAndInjectedStateInSameComponent = defineComponent({
+      setup() {
+        useProvideCountState(114514)
+        const count = useCountState()!
+        expect(count.value).toBe(114514)
+
+        return () => h('div')
+      },
+    })
 
-describe('allow call useProvidingState and useInjectedState in same component', () => {
-  it('should work', () => {
     mount(CanProvidingStateAndInjectedStateInSameComponent)
   })
 })

packages/shared/createInjectionState/index.ts

@@ -2,6 +2,13 @@ import type { InjectionKey } from 'vue-demi'
 import { provideLocal } from '../provideLocal'
 import { injectLocal } from '../injectLocal'
 
+export interface CreateInjectionStateOptions<Return> {
+  /**
+   * Custom injectionKey for InjectionState
+   */
+  injectionKey?: string | InjectionKey<Return>
+}
+
 /**
  * Create global state that can be injected into components.
  *
@@ -10,8 +17,9 @@ import { injectLocal } from '../injectLocal'
  */
 export function createInjectionState<Arguments extends Array<any>, Return>(
   composable: (...args: Arguments) => Return,
+  options?: CreateInjectionStateOptions<Return>,
 ): readonly [useProvidingState: (...args: Arguments) => Return, useInjectedState: () => Return | undefined] {
-  const key: string | InjectionKey<Return> = Symbol('InjectionState')
+  const key: string | InjectionKey<Return> = options?.injectionKey || Symbol('InjectionState')
   const useProvidingState = (...args: Arguments) => {
     const state = composable(...args)
     provideLocal(key, state)