vue3全局变量

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

// 创建一个全局属性或方法
const app = createApp(App);

// 通过app.config.globalProperties添加全局变量
app.config.globalProperties.$globalVar = "This is a global variable";

// 现在可以在任何组件中通过 this.$globalVar 访问这个全局变量

app.mount('#app');

// 在组件中使用示例
// MyComponent.vue
<template>
  <div>
    <p>{{ globalMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      globalMessage: this.$globalVar // 使用全局变量
    };
  }
};
</script>

解释说明：

1. 创建全局变量：通过 app.config.globalProperties 可以添加全局变量或方法。这些变量或方法可以在所有的 Vue 组件中通过 this 访问。
2. 使用全局变量：在组件中，可以通过 this.$globalVar 访问全局变量，并将其赋值给组件的局部数据属性 globalMessage，然后在模板中显示。

如果需要更复杂的全局状态管理，可以考虑使用 Vuex 或 Pinia。