| 提交 | 用户 | age | ||
| 74e62c | 1 | import { |
| V | 2 | InjectionKey, |
| 3 | provide, | |
| 4 | inject, | |
| 5 | reactive, | |
| 6 | readonly as defineReadonly, | |
| 7 | defineComponent, | |
| 8 | UnwrapRef, | |
| 9 | } from 'vue'; | |
| 0692b4 | 10 | |
| 74e62c | 11 | export interface CreateContextOptions { |
| V | 12 | readonly?: boolean; |
| 13 | createProvider?: boolean; | |
| 14 | } | |
| 41d790 | 15 | |
| 74e62c | 16 | type ShallowUnwrap<T> = { |
| V | 17 | [P in keyof T]: UnwrapRef<T[P]>; |
| 0692b4 | 18 | }; |
| V | 19 | |
| 74e62c | 20 | export function createContext<T>( |
| V | 21 | context: any, |
| 22 | key: InjectionKey<T> = Symbol(), | |
| 23 | options: CreateContextOptions = {} | |
| 24 | ) { | |
| 25 | const { readonly = true, createProvider = false } = options; | |
| 26 | ||
| 27 | const state = reactive(context); | |
| 28 | ||
| 29 | const provideData = readonly ? defineReadonly(state) : state; | |
| 30 | !createProvider && provide(key, provideData); | |
| 31 | ||
| 32 | const Provider = createProvider | |
| 33 | ? defineComponent({ | |
| 34 | name: 'Provider', | |
| 35 | inheritAttrs: false, | |
| 36 | setup(_, { slots }) { | |
| 37 | provide(key, provideData); | |
| 38 | return () => slots.default?.(); | |
| 39 | }, | |
| 40 | }) | |
| 41 | : null; | |
| 42 | ||
| 43 | return { Provider, state }; | |
| 44 | } | |
| 45 | ||
| 0692b4 | 46 | export const useContext = <T>( |
| 74e62c | 47 | key: InjectionKey<T> = Symbol(), |
| 0692b4 | 48 | defaultValue?: any, |
| 74e62c | 49 | readonly = false |
| V | 50 | ): ShallowUnwrap<T> => { |
| 51 | const state = inject(key, defaultValue || {}); | |
| 52 | ||
| 53 | return readonly ? defineReadonly(state) : state; | |
| 0692b4 | 54 | }; |
