小编Bob*_*Bob的帖子

我想在 Vue 3 中声明一个全局变量，任何组件（以及 main.js 本身）都可以随时更改该变量，并且应该是响应式的。

我的 main.js 文件：

const app = createApp(App);

app.config.globalProperties.$myGlobalVariable = {
   content: 'not updated'
};

// simulating something async as an HTTP call
setTimeout(() => {
  app.config.globalProperties.$myGlobalVariable.content = 'updated';
  console.log(app.config.globalProperties.$myGlobalVariable.content); // updated
}, 2000);

app.mount('#app');

我的组件文件：

<script>
   export default {
      created() {
         setTimeout(() => {
            console.log(this.$myGlobalVariable.content)// updated
         }, 3000);
      }
   }
</script>
<template>
  <main>
    <p>{{ $myGlobalVariable.content }}</p>
  </main>
</template>

在我的组件（p元素）内部，我只看到not updated，尽管我的组件的函数setTimeout内部created()证明它已经改变。$myGlobalVariable.content如何获取元素内部更改的值p？