[vue3] 少量全局数据共享（不用 Vuex/Pinia）

在 Vue 3 项目中，如果只有很少的数据需要全局共享，不使用 Vuex、Pinia ，可以用更简单的方式实现全局数据共享

组合式 API + 单文件导出

直接用 ref/reactive 在模块作用域创建全局响应式数据

js 复制代码

// src/globalState.js
import { ref, reactive } from 'vue'

// 全局响应式变量
export const globalCount = ref(0)
export const globalUser = reactive({ name: '张三', age: 18 })

在任意组件中直接引入使用：

js 复制代码

<script setup>
import { globalCount, globalUser } from '@/globalState'

function add() {
  globalCount.value++
  globalUser.age++
}
</script>

<template>
  <div>
    <p>全局计数：{{ globalCount }}</p>
    <p>全局用户：{{ globalUser.name }} - {{ globalUser.age }}</p>
    <button @click="add">增加</button>
  </div>
</template>

自定义 Composable 封装

可以封装成自定义 hooks（composable）：

js 复制代码

// src/useGlobalData.js
import { ref } from 'vue'

const count = ref(0)

export function useGlobalData() {
  return { count }
}

组件中使用：

js 复制代码

<script setup>
import { useGlobalData } from '@/useGlobalData'
const { count } = useGlobalData()
</script>

参考：

Vue 3 少量全局数据共享的最佳实践（无需 Vuex/Pinia）