Vue3中通过app.config.globalProperties使用全局变量的示例

在 Vue 3 中，你可以使用 `app.config.globalProperties` 来定义和使用全局变量。下面是一个示例，展示如何在 Vue 3 中使用 `app.config.globalProperties` 来定义和访问全局变量：

// main.js

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 定义全局变量
app.config.globalProperties.$globalVariable = 'Hello, world!';

app.mount('#app');

在上述示例中，我们在 `main.js` 文件中使用 `app.config.globalProperties` 来定义全局变量 `$globalVariable`，并将其设置为 `'Hello, world!'`。

然后，在组件中可以通过 `this.$globalVariable` 来访问全局变量：

<template>
  <div>
    <p>{{ $globalVariable }}</p>
    <button @click="updateGlobalVariable">Update Global Variable</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateGlobalVariable() {
      this.$globalVariable = 'Updated Global Variable';
    }
  }
};
</script>

在上述示例的组件中，我们通过 `this.$globalVariable` 来访问全局变量，并可以在方法中更新全局变量的值。

通过 `app.config.globalProperties`，可以在 Vue 3 中方便地定义和使用全局变量。但是请注意，滥用全局变量可能会导致代码可维护性和可测试性的问题，所以请谨慎使用。