vue3从精通到入门23：定义全局变量

在vue2中，我们知道vue2.x是使用Vue.prototype.$xxxx=xxx来定义全局变量，比如定义一个全局的工具函数。

// 定义
...
Vue.prototype.$utils=utils;// 使用
this.$utils()
...

在vue3中我们无法使用this，提供了globalProperties；

globalProperties

我们在应用的入口文件（如 main.ts）中定义一个全局变量：

// main.ts  
import { createApp } from 'vue';  
import App from './App.vue';  // 定义全局变量  
const globalVariable = {  message: 'Hello from global variable!'  
};  // 创建并挂载应用  
const app = createApp(App);  
app.config.globalProperties.$globalVariable = globalVariable; // 将全局变量添加到全局属性上  
app.mount('#app');

getCurrentInstance 来访问这个全局变量：

<!-- MyComponent.vue -->  
<template>  <div>  <p>{{ globalMessage }}</p>  </div>  
</template>  <script setup lang="ts">  
import { ref, onMounted } from 'vue';  
import { getCurrentInstance } from 'vue';  const globalMessage = ref('');  onMounted(() => {  const { proxy } = getCurrentInstance() if (proxy ) {  // 通过全局属性访问全局变量  const globalVariable = proxy.globalProperties.$globalVariable;  if (globalVariable) {  globalMessage.value = globalVariable.message;  }  }  
});  
</script>

然而，这种做法有几个问题：

1. 它违反了 Vue 的组件化原则，因为组件应该通过 props、events 或 provide/inject 来与其他部分通信，而不是直接访问全局状态。

2. 它使得代码更难理解和维护，因为全局状态的管理变得不透明。

3. 如果全局状态发生变化，组件可能不会自动更新，除非使用额外的机制来监听这些变化。