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

建议

更好的做法是使用 Vuex 或其他状态管理库来管理全局状态，或者使用 Vue 3 的 provide/inject API 在组件树中传递状态。如果你只是想在多个组件之间共享一些简单的数据，也可以考虑使用 provide/inject 而不是定义全局变量。

总之，尽管技术上可以通过 getCurrentInstance 访问全局变量，但这并不是推荐的做法。相反，你应该使用 Vue 提供的更合适和更可维护的机制来管理状态。

原文地址：https://blog.csdn.net/qq_40358970/article/details/137776896

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！