Vue3通过provide/inject设置全局变量

在 Vue 3 中，你可以使用组合 API 来注入和使用全局变量。组合 API 提供了一种更灵活的方式来组织和重用组件逻辑，包括全局状态的管理。

以下是在 Vue 3 中使用组合 API 来注入和使用全局变量的基本步骤：

1. 创建全局变量： 在一个单独的文件中，创建全局变量并导出它，使其可在整个应用中使用。

// globalVariables.js
 
import { ref } from 'vue';
 
export const globalVariable = ref('Global Variable Value');

2. 在组件中使用全局变量： 在需要访问全局变量的组件中使用 inject 方法将全局变量注入，并通过组合 API 的 provide 方法提供该全局变量。

// YourComponent.vue
 
<template>
  <div>
    <p>Global Variable: {{ globalVar }}</p>
  </div>
</template>
 
<script>
import { inject, onMounted } from 'vue';
import { globalVariable } from './globalVariables.js';
 
export default {
  setup() {
    const globalVar = inject('globalVariable', globalVariable);
 
    onMounted(() => {
      console.log('Global Variable:', globalVar);
    });
 
    return {
      globalVar
    };
  }
};
</script>

在上面的示例中，我们将全局变量 globalVariable 提供给了组件，并在组合 API 的 setup 函数中使用 inject 方法将其注入，然后可以在模板中直接使用。同时，在 onMounted 钩子中输出了全局变量的值。