8000 feat(createInjectionState): add injectionKey option (#3404) · vueuse/vueuse@90d3400 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 90d3400

Browse files
PPetauantfu
PPetau
and
antfu
authored
feat(createInjectionState): add injectionKey option (#3404)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
1 parent c3a69ee commit 90d3400

File tree

3 files changed

+100
-32
lines changed

3 files changed

+100
-32
lines changed

‎packages/shared/createInjectionState/index.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,3 +106,30 @@ const { increment } = useCounterStore()!
106106
</button>
107107
</template>
108108
```
109+
110+
## Provide a custom InjectionKey
111+
112+
113+
```ts
114+
// useCounterStore.ts
115+
import { computed, ref } from 'vue'
116+
import { createInjectionState } from '@vueuse/shared'
117+
118+
// custom injectionKey
119+
const CounterStoreKey = 'counter-store'
120+
121+
const [useProvideCounterStore, useCounterStore] = createInjectionState((initialValue: number) => {
122+
// state
123+
const count = ref(initialValue)
124+
125+
// getters
126+
const double = computed(() => count.value * 2)
127+
128+
// actions
129+
function increment() {
130+
count.value++
131+
}
132+
133+
return { count, double, increment }
134+
}, { injectionKey: CounterStoreKey })
135+
```

‎packages/shared/createInjectionState/index.test.ts

Lines changed: 64 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,81 @@
1-
import { defineComponent, h, ref } from 'vue-demi'
1+
import { type InjectionKey, type Ref, defineComponent, h, inject, ref } from 'vue-demi'
22
import { createInjectionState } from '@vueuse/shared'
33
import { describe, expect, it } from 'vitest'
44
import { mount } from '../../.test'
55

6-
const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
7-
const count = ref(initialValue)
8-
return count
9-
})
6+
describe('createInjectionState', () => {
7+
it('should work 1', () => {
8+
const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
9+
const count = ref(initialValue)
10+
return count
11+
})
1012

11-
const ChildComponent = defineComponent({
12-
setup() {
13-
const count = useCountState()
14-
expect(count?.value).toBe(0)
13+
const ChildComponent = defineComponent({
14+
setup() {
15+
const count = useCountState()
16+
expect(count?.value).toBe(0)
1517

16-
return () => h('div')
17< E7F5 /code>-
},
18-
})
18+
return () => h('div')
19+
},
20+
})
1921

20-
const RootComponent = defineComponent({
21-
setup() {
22-
useProvideCountState(0)
22+
const RootComponent = defineComponent({
23+
setup() {
24+
useProvideCountState(0)
2325

24-
return () => h(ChildComponent)
25-
},
26-
})
26+
return () => h(ChildComponent)
27+
},
28+
})
2729

28-
describe('createInjectionState simple example', () => {
29-
it('should work', () => {
3030
mount(RootComponent)
3131
})
32-
})
3332

34-
const CanProvidingStateAndInjectedStateInSameComponent = defineComponent({
35-
setup() {
36-
useProvideCountState(114514)
37-
const count = useCountState()!
38-
expect(count.value).toBe(114514)
33+
it('should work (custom key)', () => {
34+
const KEY: InjectionKey<Ref<number>> = Symbol('count-state')
3935

40-
return () => h('div')
41-
},
42-
})
36+
const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
37+
const count = ref(initialValue)
38+
return count
39+
}, { injectionKey: KEY })
40+
41+
const ChildComponent = defineComponent({
42+
setup() {
43+
const count = useCountState()
44+
expect(count?.value).toBe(0)
45+
const count2 = inject(KEY)
46+
expect(count2?.value).toBe(0)
47+
48+
return () => h('div')
49+
},
50+
})
51+
52+
const RootComponent = defineComponent({
53+
setup() {
54+
useProvideCountState(0)
55+
56+
return () => h(ChildComponent)
57+
},
58+
})
59+
60+
mount(RootComponent)
61+
})
62+
63+
it('allow call provideLocal and injectLocal in same component', () => {
64+
const [useProvideCountState, useCountState] = createInjectionState((initialValue: number) => {
65+
const count = ref(initialValue)
66+
return count
67+
})
68+
69+
const CanProvidingStateAndInjectedStateInSameComponent = defineComponent({
70+
setup() {
71+
useProvideCountState(114514)
72+
const count = useCountState()!
73+
expect(count.value).toBe(114514)
74+
75+
return () => h('div')
76+
},
77+
})
4378

44-
describe('allow call useProvidingState and useInjectedState in same component', () => {
45-
it('should work', () => {
4679
mount(CanProvidingStateAndInjectedStateInSameComponent)
4780
})
4881
})

‎packages/shared/createInjectionState/index.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import type { InjectionKey } from 'vue-demi'
22
import { provideLocal } from '../provideLocal'
33
import { injectLocal } from '../injectLocal'
44

5+
export interface CreateInjectionStateOptions<Return> {
6+
/**
7+
* Custom injectionKey for InjectionState
8+
*/
9+
injectionKey?: string | InjectionKey<Return>
10+
}
11+
512
/**
613
* Create global state that can be injected into components.
714
*
@@ -10,8 +17,9 @@ import { injectLocal } from '../injectLocal'
1017
*/
1118
export function createInjectionState<Arguments extends Array<any>, Return>(
1219
composable: (...args: Arguments) => Return,
20+
options?: CreateInjectionStateOptions<Return>,
1321
): readonly [useProvidingState: (...args: Arguments) => Return, useInjectedState: () => Return | undefined] {
14-
const key: string | InjectionKey<Return> = Symbol('InjectionState')
22+
const key: string | InjectionKey<Return> = options?.injectionKey || Symbol('InjectionState')
1523
const useProvidingState = (...args: Arguments) => {
1624
const state = composable(...args)
1725
provideLocal(key, state)

0 commit comments

Comments
 (0)
0