javascript - Vue 3 全局属性不是响应式(Reactive)的

Question

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

我的 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，尽管 created() 中的 setTimeout 我的组件的功能证明它已经改变了。如何获取 $myGlobalVariable.content 的值以在 p 元素内更改？

Answer 1

您将一个非 react 性对象放入 globalProperties 并期望它变成 react 性对象。这不会发生。

Vue 公开了它的 react 性，因此它可以在任何地方导入和使用。
使 $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>