用setup实现跨组件状态共享的核心是抽离响应式数据与逻辑为组合式函数，通过export const或provide/inject共享；方案一适合小项目直接导出ref/reactive，方案二适用于局部作用域隔离，方案三封装useXxx函数实现逻辑复用。
用 setup 实现跨组件状态共享，核心思路是：把响应式数据和逻辑抽离成可复用的组合式函数（Composable），再通过 provide / inject 或 export const 的响应式对象，在多个组件中访问同一份状态。不依赖 Pinia，也能做到轻量、清晰、可维护。
方案一：用 ref + export 全局响应式状态
适合小项目或状态极少、无需复杂作用域隔离的场景。直接导出一个 ref 或 reactive 对象，所有导入它的组件都操作同一份响应式数据。
例如：
store.jsimport { ref, reactive } from 'vue'
// 方式1：基础值共享
export const count = ref(0)
// 方式2：对象状态共享（推荐，便于扩展）
export const userStore = reactive({
name: '',
avatar: '',
isLoggedIn: false,
login(name) {
this.name = name
this.isLoggedIn = true
},
logout() {
this.name = ''
this.isLoggedIn = false
}
})
在任意组件中使用：
import { count, userStore } from './store.js'
export default {
setup() {
return () => (
<div>
<p>当前计数：{count.value}</p>
<p>用户：{userStore.name} — {userStore.isLoggedIn ? '已登录' : '未登录'}</p>
</div>
)
}
}
方案二：用 provide / inject 实现局部作用域共享
适合需要限制状态影响范围（比如只在某几个子组件间共享）、或需多实例隔离（如多个表单独立状态）的场景。父组件 provide，子孙组件 inject，天然支持响应式。
示例：一个表单上下文，供多个子字段组件读写：
// FormProvider.vue
import { provide, reactive, inject } from 'vue'
const FORM_KEY = Symbol('form')
export function useForm() {
const form = inject(FORM_KEY)
if (!form) throw new Error('useForm must be used within FormProvider')
return form
}
export default {
name: 'FormProvider',
props: ['initialData'],
setup(props, { slots }) {
const state = reactive({ ...props.initialData })
provide(FORM_KEY, {
state,
setField(key, value) {
state[key] = value
},
reset() {
Object.assign(state, { ...props.initialData })
}
})
return () => slots.default?.()
}
}
子组件中调用：
// InputField.vue
import { useForm } from './FormProvider.vue'
export default {
props: ['name'],
setup(props) {
const { state, setField } = useForm()
return () => (
<input
value={state[props.name]}
onInput={(e) => setField(props.name, e.target.value)}
/>
)
}
}
方案三：封装为可复用的 useXxx 组合函数（带内部状态）
适合逻辑内聚、状态与行为绑定紧密的场景（如弹窗控制、请求状态、主题切换）。组合函数内部创建并返回响应式状态，配合 provide/inject 或直接导出，实现“一次定义、多处复用”。
示例：全局消息提示 useMessage
// composables/useMessage.js
import { ref, onUnmounted } from 'vue'
let instance = null
export function useMessage() {
if (instance) return instance
const messages = ref([])
const add = (text, type = 'info') => {
const id = Date.now() + Math.random()
messages.value.push({ id, text, type })
// 自动移除
setTimeout(() => {
messages.value = messages.value.filter(m => m.id !== id)
}, 3000)
}
const clear = () => {
messages.value = []
}
instance = { messages, add, clear }
return instance
}
在任意组件中调用 useMessage()，拿到的是同一份 messages 响应式数组，天然跨组件同步。
关键注意事项
-
避免直接导出普通对象：必须用
ref、reactive或computed包裹，否则失去响应性 -
组合函数慎用闭包状态：如
useMessage中的instance单例，要明确是否允许多实例；需要多实例时，改用provide/inject配合Symbol键 -
注意生命周期清理：比如定时器、事件监听、异步请求，应在
onUnmounted或onBeforeUnmount中清理，防止内存泄漏 -
命名规范统一：组合函数以
use开头，store 文件建议用store或composables目录归类，提升可读性
