我有一堆自定义的配置比如
export function setupAuth(): void { const velon = useVelon(); const store = new LocalStorageStore(); const service = new TokenService(velon.conf!.auth!, store); velon.auth = { store, service }; }
再比如
export function setupHttp(): void { const velon = useVelon(); velon.http = new HttpClient(velon.conf!, velon.auth!.service!); }
诸如此类的一些对象,希望真正使用时可以通过如下方式调用
useVelon().http
目前 useVelon
的实现方式为
export function useVelon(): Velon { // @ts-ignore if (window.velon) return window.velon; // @ts-ignore window.velon = reactive<VelonType>({}); // @ts-ignore return window.velon; }
尝试过使用如下方式
declare let velon export function useVelon():Velon{....}
这样不好使
假如有一天我要把我的项目扔到electron
或者其他没有window
的地方去,这个全局唯一
对象应该放在哪里?
1 thinkershare 2023-01-13 17:45:37 +08:00 ![]() globalThis 总是有的。 |
2 mxT52CRuqR6o5 2023-01-13 17:45:49 +08:00 ![]() globalThis |
3 thinkershare 2023-01-13 17:47:32 +08:00 ![]() 另外还是建议你按照 namspace 分离一下,模块化要解决的问题除了 namespace 还有按需加载和静态引用分析。 |
![]() | 4 molvqingtai 2023-01-13 17:48:17 +08:00 ![]() 挂载到 globalThis 或 vue.prototype 上,但是两者都不建议 |
5 anonymous2351d00 OP @thinkershare 受教了,感谢老哥。 |
6 anonymous2351d00 OP @thinkershare 另外还想请问,有没有什么分析 TS 代码引用关系的工具,可以帮助我来着手优化模块应用。 |
![]() | 7 learningman 2023-01-13 18:09:53 +08:00 vue2 的话直接挂 vue 上 |
8 thinkershare 2023-01-13 18:20:34 +08:00 ![]() |
9 n0099 2023-01-13 20:45:50 +08:00 ![]() |
![]() | 10 linkopeneyes 2023-01-14 10:08:19 +08:00 ![]() vue 有依赖注入,直接用 provide 挂在全局,然后封装一下 inject 这样最起码还有类型,如果 provide ref 的话还是响应式的,react ,vue 的组件库的 globalConfig 都是用 provide 实现的 |
11 anonymous2351d00 OP @sjhhjx0122 nonono 这个不能用 provide ,想一下每次你要用 http const http = unref(inject(HTTP_PROVIDE_KEY)) http.post() 每次都得声明 |
12 anonymous2351d00 OP @sjhhjx0122 而我这种方式 useVelon.http 或者直接抽成 const http = useHttp |
![]() | 13 linkopeneyes 2023-01-14 14:48:34 +08:00 via Android ![]() @anonymous2351d00 不需要啊 const http = unref(inject(HTTP_PROVIDE_KEY)) http.post() 为什么不直接封装成一个 hook 呢就跟你下面的一个效果了 |
14 JuzerQ 2023-01-15 18:58:21 +08:00 via Android 既然你调用时都是 useVelon ,没必要挂载在全局上 |