Q: Vue 有没有什么可以在无需引用就可挂载的全局对象?

[anonymous2351d00]

intro

我有一堆自定义的配置比如

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

try

尝试过使用如下方式

declare let velon

export function useVelon():Velon{....}

这样不好使

question

假如有一天我要把我的项目扔到electron或者其他没有window的地方去，这个全局唯一对象应该放在哪里？

[thinkershare]

globalThis 总是有的。

[mxT52CRuqR6o5]

globalThis

[thinkershare]

另外还是建议你按照 namspace 分离一下，模块化要解决的问题除了 namespace 还有按需加载和静态引用分析。

[molvqingtai]

挂载到 globalThis 或 vue.prototype 上，但是两者都不建议

[anonymous2351d00]

@thinkershare 受教了，感谢老哥。

[anonymous2351d00]

@thinkershare 另外还想请问，有没有什么分析 TS 代码引用关系的工具，可以帮助我来着手优化模块应用。

[learningman]

vue2 的话直接挂 vue 上

[thinkershare]

@anonymous2351d00 https://github.com/PSeitz/ts-dependency-graph

[h0099]

https://vuejs.org/guide/components/provide-inject.html
https://vuejs.org/api/composition-api-dependency-injection.html
但不如#4 的简单粗暴

[sjhhjx0122]

vue 有依赖注入，直接用 provide 挂在全局，然后封装一下 inject 这样最起码还有类型，如果 provide ref 的话还是响应式的，react ，vue 的组件库的 globalConfig 都是用 provide 实现的

[anonymous2351d00]

@sjhhjx0122 nonono 这个不能用 provide ，想一下每次你要用 http

const http = unref(inject(HTTP_PROVIDE_KEY))
http.post()

每次都得声明

[anonymous2351d00]

@sjhhjx0122 而我这种方式
useVelon.http 或者直接抽成 const http = useHttp

[sjhhjx0122]

@anonymous2351d00 不需要啊 const http = unref(inject(HTTP_PROVIDE_KEY))
http.post()
为什么不直接封装成一个 hook 呢就跟你下面的一个效果了

[JuzerQ]

既然你调用时都是 useVelon ，没必要挂载在全局上