V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
anonymous2351d00
V2EX  ›  Vue.js

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

  •  
  •   anonymous2351d00 · 2023-01-13 17:43:08 +08:00 · 1871 次点击
    这是一个创建于 671 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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的地方去,这个全局唯一对象应该放在哪里?

    14 条回复    2023-01-15 18:58:21 +08:00
    thinkershare
        1
    thinkershare  
       2023-01-13 17:45:37 +08:00   ❤️ 1
    globalThis 总是有的。
    mxT52CRuqR6o5
        2
    mxT52CRuqR6o5  
       2023-01-13 17:45:49 +08:00   ❤️ 1
    globalThis
    thinkershare
        3
    thinkershare  
       2023-01-13 17:47:32 +08:00   ❤️ 1
    另外还是建议你按照 namspace 分离一下,模块化要解决的问题除了 namespace 还有按需加载和静态引用分析。
    molvqingtai
        4
    molvqingtai  
       2023-01-13 17:48:17 +08:00   ❤️ 1
    挂载到 globalThis 或 vue.prototype 上,但是两者都不建议
    anonymous2351d00
        5
    anonymous2351d00  
    OP
       2023-01-13 17:50:41 +08:00
    @thinkershare 受教了,感谢老哥。
    anonymous2351d00
        6
    anonymous2351d00  
    OP
       2023-01-13 17:52:46 +08:00
    @thinkershare 另外还想请问,有没有什么分析 TS 代码引用关系的工具,可以帮助我来着手优化模块应用。
    learningman
        7
    learningman  
       2023-01-13 18:09:53 +08:00
    vue2 的话直接挂 vue 上
    thinkershare
        8
    thinkershare  
       2023-01-13 18:20:34 +08:00   ❤️ 1
    sjhhjx0122
        10
    sjhhjx0122  
       2023-01-14 10:08:19 +08:00   ❤️ 1
    vue 有依赖注入,直接用 provide 挂在全局,然后封装一下 inject 这样最起码还有类型,如果 provide ref 的话还是响应式的,react ,vue 的组件库的 globalConfig 都是用 provide 实现的
    anonymous2351d00
        11
    anonymous2351d00  
    OP
       2023-01-14 13:19:45 +08:00
    @sjhhjx0122 nonono 这个不能用 provide ,想一下每次你要用 http

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

    每次都得声明
    anonymous2351d00
        12
    anonymous2351d00  
    OP
       2023-01-14 13:20:42 +08:00
    @sjhhjx0122 而我这种方式
    useVelon.http 或者直接抽成 const http = useHttp
    sjhhjx0122
        13
    sjhhjx0122  
       2023-01-14 14:48:34 +08:00 via Android   ❤️ 1
    @anonymous2351d00 不需要啊 const http = unref(inject(HTTP_PROVIDE_KEY))
    http.post()
    为什么不直接封装成一个 hook 呢就跟你下面的一个效果了
    JuzerQ
        14
    JuzerQ  
       2023-01-15 18:58:21 +08:00 via Android
    既然你调用时都是 useVelon ,没必要挂载在全局上
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5350 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 07:53 · PVG 15:53 · LAX 23:53 · JFK 02:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.