defineRootContext
在根部视图声明跨页面共享上下文
defineRootContext() 用于在根部视图中定义跨页面共享的状态与方法。
它的核心价值是给“全局共享能力”一个稳定的落点,并在页面切换时保持同一份上下文。
使用位置
src/App.vue的<script setup>顶层
src/App.vue
<script setup lang="ts">
const ctx = defineRootContext(() => {
return {
// user, token, logout, openGlobalModal...
}
})
</script>
签名
defineRootContext<T>(factory: () => T): T
参数
factory
- 类型:
() => T - 含义:上下文工厂函数,返回一组需要跨页面共享的状态/方法
返回值
返回 factory 的返回值 T,可在 App.vue 中直接使用。
约束与建议
- 只放“跨页面共享”的内容:登录态、全局开关、全局弹窗控制等
- 不要把单页局部状态放进来,避免耦合与维护成本
- 返回值建议是可序列化/可读的 plain object(由
ref/computed/函数等组成)