vue3 读取 globalProperties

在Vue 3中，可以通过`app.config.globalProperties`来读取和设置全局属性。`globalProperties`是一个对象，可以在应用程序的任何地方访问和使用。

要读取`globalProperties`中的属性，可以使用`this`关键字或`$`符号来访问。例如，如果在`globalProperties`中定义了一个名为`$api`的属性，可以通过`this.$api`或`$api`来访问它。

下面是一个示例，展示了如何在Vue 3中读取`globalProperties`：

// main.js
import { createApp } from 'vue';

const app = createApp(App);

app.config.globalProperties.$api = {
  // 定义一些API方法
  // ...
};

app.mount('#app');

<!-- MyComponent.vue -->
<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    fetchData() {
      // 通过this.$api来访问全局属性
      const data = this.$api.getData();
      // 处理数据
    },
  },
};
</script>

在上面的示例中，我们在`main.js`文件中将一个名为`$api`的属性添加到了`globalProperties`中。然后，在`MyComponent.vue`组件中，我们可以通过`this.$api`来访问该属性，并调用其中的方法。