第8节：Vue3 全局访问

下面是一个示例，演示了如何在UniApp中使用Vue3框架进行全局访问：

首先，创建一个全局状态管理模块。在global.js文件中，我们可以定义一些全局状态和函数：

// global.js  
import { ref, reactive } from 'vue';  
  
export const useGlobalState = () => {  
  const state = reactive({  
    // 全局状态  
    message: 'Hello, UniApp!',  
  });  
  
  const setMessage = (newMessage) => {  
    state.message = newMessage;  
  };  
  
  return {  
    state,  
    setMessage,  
  };  
};

然后，在需要全局访问的地方，导入并使用useGlobalState：

<template>  
  <view>  
    <!-- 访问全局状态 -->  
    <text>{{ globalState.message }}</text>  
  
    <!-- 调用全局函数 -->  
    <button @click="setGlobalMessage">设置全局消息</button>  
  </view>  
</template>  
  
<script>  
import { useGlobalState } from './global.js';  
  
export default {  
  setup() {  
    const globalState = useGlobalState();  
    const setGlobalMessage = () => {  
      globalState.setMessage('New global message');  
    };  
  
    return {  
      globalState,  
      setGlobalMessage,  
    };  
  },  
};  
</script>

在上面的示例中，我们首先导入了useGlobalState函数，并在setup函数中调用它。然后，我们可以在模板中直接访问全局状态globalState.message，以及通过按钮点击调用全局函数setGlobalMessage来更新全局状态。这样，我们就可以在UniApp中的任何组件中访问和修改全局状态了。