Subscribe on changes!

How to use app.config.globalProperties.xxx in setup?

avatar
Sep 25th 2020

Version

3.0.0

Reproduction link

https://github.com/XingXiaoWu/vue-question

Steps to reproduce

1.main.js

app.config.globalProperties.name = '123';

2.APP.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <button @click="touchme">touchme</button>
</template>

<script>
import { getCurrentInstance } from 'vue';

export default {
  name: 'App',
  components: {
  },
  setup() {
    const { ctx } = getCurrentInstance();

    const touchme = () => {
      console.log(ctx.name);
    };
    return {
      touchme,
    };
  },
};
</script>

What is expected?

Build can print the name later

What is actually happening?

ctx.name is undefiend


In the url globalproperties .

It tells how it is used in the mounted.

but don't say how to use in setup.

If convenient, can you document how to use it in setup

avatar
Sep 25th 2020

here is my code(https://codesandbox.io/s/youthful-gauss-h452m?file=/src/components/Greet.vue), use "proxy" can work, "ctx" is internal property of "ComponentInternalInstance". In addition, pay attention to local variable name conflicts, local variables have higher priority, uncomment local variable will print local variable

avatar
Sep 25th 2020

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.


The global properties are meant to be used by the option api. Create useSomething() functions like vue-router's useRoute() for setup usage instead of using getCurrentInstance() https://github.com/vuejs/rfcs/pull/117