在 Vue 3 项目中，如果你只有很少的数据 需要全局共享，其实没必要引入 Vuex、Pinia 这类重量级状态管理库，完全可以用更简单的方式实现全局数据共享。下面我给你介绍几种常用且简洁的做法👇
1️⃣ 组合式 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>特点：
- 🚀 简单、轻量、无依赖
- 🔄 响应式，所有用到的组件都会自动更新
2️⃣ 自定义 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>3️⃣ 使用 provide/inject（适合父子/多级组件）
如果你的全局数据只需要在某个组件树下共享，可以用 Vue 的 provide/inject：
js
// App.vue
<script setup>
import { ref, provide } from 'vue'
const count = ref(0)
provide('globalCount', count)
</script>
js
// 子组件
<script setup>
import { inject } from 'vue'
const count = inject('globalCount')
</script>这种方式适合"局部全局"，即只在某个组件树下共享。
4️⃣ 什么时候用 Pinia/Vuex？
- 只有数据量较多 ，业务复杂 ，需要模块化管理时，才建议引入专门的状态管理库。
- 少量全局数据，完全没必要！
🏆 总结
- 全局数据很少时，直接用
ref/reactive导出变量最简单！ - 需要更复杂管理时再考虑 Pinia/Vuex。