如何利用 setup 实现跨组件的状态共享？不用 Pinia 的轻量级方案-Vue.js-PHP中文网

用setup实现跨组件状态共享的核心是抽离响应式数据与逻辑为组合式函数，通过export const或provide/inject共享；方案一适合小项目直接导出ref/reactive，方案二适用于局部作用域隔离，方案三封装useXxx函数实现逻辑复用。

如何利用 setup 实现跨组件的状态共享？不用 pinia 的轻量级方案

用 setup 实现跨组件状态共享，核心思路是：把响应式数据和逻辑抽离成可复用的组合式函数（Composable），再通过 provide / inject 或 export const 的响应式对象，在多个组件中访问同一份状态。不依赖 Pinia，也能做到轻量、清晰、可维护。

方案一：用 `ref` + `export` 全局响应式状态

适合小项目或状态极少、无需复杂作用域隔离的场景。直接导出一个 ref 或 reactive 对象，所有导入它的组件都操作同一份响应式数据。

例如：

store.js

import { 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 目录归类，提升可读性