VueJS 3中如何从composable访问主组件setup内的响应式数据？

核心结论 #

你无法在useDrivers内部直接访问组件setup作用域内定义的data变量，但是可以通过初始化composable时传入依赖的方式，实现调用saveDriver时无需传参的效果，该方案在对应场景下符合开发规范。

具体实现方案 #

你只需要在定义useDrivers时，将依赖的响应式数据作为初始化参数传入即可，无需在每次调用saveDriver时传参：

composable实现代码 #

// @composables/use-drivers.js
export default function useDrivers(formData) {
  const saveDriver = () => {
    // 此处可直接读取响应式对象内的最新值
    const { driver, accident, anotherUsedVar } = formData
    // 后续执行保存逻辑即可
    console.log('提交数据：', driver, accident.id, anotherUsedVar)
  }

  return { saveDriver }
}

组件内调用代码 #

import useDrivers from "@composables/use-drivers";
export default {
  setup() {
    const data= reactive({
      foo: null,
      bar: null,
      accident: { /* 数据 */ },
      driver: { /* 数据 */ },
      anotherUsedVar: null,
    });
    // 初始化时传入响应式data对象
    const { saveDriver } = useDrivers(data);

    // 调用时无需传任何参数
    saveDriver();
  }
}

如果想要降低耦合度，避免composable依赖整个data对象，也可以仅传入需要的字段：

// 初始化时仅传入composable需要的响应式字段
const { saveDriver } = useDrivers({
  driver: toRef(data, 'driver'),
  accidentId: toRef(data.accident, 'id'),
  anotherUsedVar: toRef(data, 'anotherUsedVar')
});

规范符合性说明 #

该方案是否属于最佳实践需要根据composable的定位判断：

• 如果useDrivers是业务专属composable，仅服务于固定结构的司机相关业务组件，这种写法是合理的，属于有效减少重复代码的封装方式，完全符合开发规范。
• 如果useDrivers是通用工具类composable，需要在不同数据结构的组件中复用，那这种写法会导致composable和组件数据结构强耦合，降低复用性，该场景下的最佳实践是显式在调用saveDriver时传递参数，或者明确声明composable的入参规则，避免隐式依赖。

注意：无论哪种场景，都不建议在composable内随意修改传入数据的无关字段，避免产生难以排查的副作用。

内容的提问来源于stack exchange，提问作者beitomartinez