uniappvue3如何在app.vue中设置全局变量

在UniApp（Vue3版本）中，要在`app.vue`文件中设置全局变量，你可以使用Vue的`provide/inject`机制或者Vue 3.x中的`ref`和`reactive`配合。这里我将分别介绍这两种方法：

1. **提供者-消费者模式（provide/inject）：**
在`app.vue`中，作为“提供者”，你需要在`setup()`钩子里创建并管理全局变量，并使用`provide()`方法提供它们：

<template>
  <!-- ... -->
</template>

<script setup>
import { ref } from 'vue';
const globalVariable = ref('Hello, UniApp!'); // 创建全局变量

// 提供全局变量
provide('globalVariable', globalVariable); // 在setup中提供

export default {
  // ...
};
</script>

然后，在其他组件中，作为“消费者”，通过`inject()`方法接收这个变量：

<script setup>
import { inject } from 'vue';

// 在其他组件中注入全局变量
const globalValue = inject('globalVariable');
console.log(globalValue); // 输出 "Hello, UniApp!"
</script>

2. **使用`ref`和`reactive`：**
如果你想基于数据变化自动更新全局状态，可以使用`reactive`创建响应式对象，再使用`ref`包裹：

<template>
  <!-- ... -->
</template>

<script setup>
import { ref, reactive } from 'vue';

// 创建一个响应式的全局对象
const globalState = reactive({ name: 'UniApp' });

// 使用ref包装以暴露给全局
const globalNameRef = ref(globalState.name);

globalState.name = 'Updated Name'; // 当状态改变时，全局名也会同步更新

export default {
  // ...
};
</script>

使用时，同样通过`ref.value`获取实际值：

<script setup>
const globalAppName = globalNameRef.value;
console.log(globalAppName); // 输出 "Updated Name"
</script>