asd
源码
查看源码
useCherry/index.ts源码
ts
export { useInjector } from "./useInjector"
export { useProvider } from "./useProvider"
export { useProviders } from "./useProviders"
export { useInjector } from "./useInjector"
export { useProvider } from "./useProvider"
export { useProviders } from "./useProviders"
useCherry/type.ts源码
ts
//定义一个用于状态共享的hook函数的标准接口
export interface FunctionalStore<T extends object> {
(...args: any[]): T;
token?: symbol;
root?: T;
}
//定义一个用于状态共享的hook函数的标准接口
export interface FunctionalStore<T extends object> {
(...args: any[]): T;
token?: symbol;
root?: T;
}
useCherry/useInjector.ts源码
ts
//对原生inject进行封装
import { inject } from "vue";
import { FunctionalStore } from "./type";
type InjectType = 'root' | 'optional';
//接收第二个参数,'root'表示直接全局使用;optional表示可选注入,防止父组件的provide并未传入相关hook
export function useInjector<T extends object>(func: FunctionalStore<T>, type?: InjectType) {
const token = func.token!;
const root = func.root;
switch (type) {
case 'optional':
return (inject<T>(token) || func.root || null) as T;
case 'root':
if (!func.root) func.root = func();
return func.root as T;
default:
const data = inject<T>(token)
if (data) {
return data as T;
};
if (root) return func.root as T;
throw new Error(`状态钩子函数${func.name}未在上层组件通过调用useProvider提供`);
}
}
//对原生inject进行封装
import { inject } from "vue";
import { FunctionalStore } from "./type";
type InjectType = 'root' | 'optional';
//接收第二个参数,'root'表示直接全局使用;optional表示可选注入,防止父组件的provide并未传入相关hook
export function useInjector<T extends object>(func: FunctionalStore<T>, type?: InjectType) {
const token = func.token!;
const root = func.root;
switch (type) {
case 'optional':
return (inject<T>(token) || func.root || null) as T;
case 'root':
if (!func.root) func.root = func();
return func.root as T;
default:
const data = inject<T>(token)
if (data) {
return data as T;
};
if (root) return func.root as T;
throw new Error(`状态钩子函数${func.name}未在上层组件通过调用useProvider提供`);
}
}
useCherry/useProvider.ts源码
ts
import { provide } from "vue";
import { FunctionalStore } from "./type";
//对原生provide进行封装
//由于inject函数只会从父组件开始查找,所以useProvider默认返回hook函数的调用结果,以防同组件层级需要使用
export function useProvider<T extends object>(func: FunctionalStore<T>): T {
!func.token && (func.token = Symbol('functional store'));
const depends = func();
provide(func.token, depends);
return depends;
}
import { provide } from "vue";
import { FunctionalStore } from "./type";
//对原生provide进行封装
//由于inject函数只会从父组件开始查找,所以useProvider默认返回hook函数的调用结果,以防同组件层级需要使用
export function useProvider<T extends object>(func: FunctionalStore<T>): T {
!func.token && (func.token = Symbol('functional store'));
const depends = func();
provide(func.token, depends);
return depends;
}
useCherry/useProviders.ts源码
ts
import { provide } from "vue";
import { FunctionalStore } from "./type";
// 可以一次传入多个hook函数, 统一管理
export function useProviders(...funcs: FunctionalStore<any>[]) {
funcs.forEach(func => {
!func.token && (func.token = Symbol('functional store'));
provide(func.token, func());
});
}
import { provide } from "vue";
import { FunctionalStore } from "./type";
// 可以一次传入多个hook函数, 统一管理
export function useProviders(...funcs: FunctionalStore<any>[]) {
funcs.forEach(func => {
!func.token && (func.token = Symbol('functional store'));
provide(func.token, func());
});
}