Skip to content

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());
    });
}

Released under the MIT License.