[Feature Request] Access to global configuration in setup context

[ayZagen]

What problem does this feature solve?

We may need to access global configured properties in setup(). As there is no this in the setup it would be great to access global configured properties from the SetupContext.

What does the proposed API look like?

Please have a look at the simple example below just to give an idea about the usage.

//main.ts
const app = createApp(Root);
app.config.globalProperties.someProp = "value";

//AnyComponent.ts
export default defineComponent({
  name: 'AnyComponent',
  setup(props, ctx){
    // access global defined property
    console.log(ctx.$config.someProp)
    return { }
  }
})

[yyx990803]

config.globalProperties are meant as an escape hatch for replicating the behavior of Vue.prototype. In setup functions, simply import what you need or explicitly use provide/inject to expose properties to app.

[johnsoncodehk]

@yyx990803 Seems unable to inject css module $style, has any alternative method?

[posva]

@johnsoncodehk you have useCssModules and useCssVars 😉 They still have to be added to the docs.
Remember you can use the Discord chat to ask questions!

[johnsoncodehk]

@posva I have been troubled by this problem for a long time! I always to use getCurrentInstance().proxy.$style before. Thanks a lot!!

[bhabgs]

config.globalProperties are meant as an escape hatch for replicating the behavior of Vue.prototype. In setup functions, simply import what you need or explicitly use provide/inject to expose properties to app.

有没有什么方式能过改善这种写法？

import { defineComponent, getCurrentInstance } from 'vue';

export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance(); // 这样写会报告 proxy会错误，只能一步步写成如下方式
    const that = getCurrentInstance();
    const mitt = that?.proxy?.$mitt;
    return () => (
      <div
        class='test'
        onClick={() => {
          mitt?.emit('vite-tabspage-add', { a: 1 });
        }}
      >
        emit
      </div>
    );
  },
});