Vue 3 全局属性不是响应式的

Question

我想在 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？

Answer 1

您将一个非反应性对象放入其中globalProperties并期望它变得反应性。这不会发生。

Vue 公开了它的反应性，因此可以在任何地方导入和使用它。
做出$myGlobalVariable反应式是直接且直观的：

app.config.globalProperties.$myGlobalVariable = reactive({
  content: 'not updated'
})

演示：

const { createApp, reactive } = Vue

const app = createApp()

app.config.globalProperties.$myGlobalVariable = reactive({
  content: 'not updated'
})

app.mount('#app')

<script src="https://unpkg.com/vue@3.2.41/dist/vue.global.prod.js"></script>
<div id="app">
  <input v-model="$myGlobalVariable.content" />
  <pre v-text="$myGlobalVariable" />
</div>