从可组合项访问主要组件上的数据 - VueJS 3

Question

我想知道从可组合方法访问我的 setup 函数上的数据的最佳方法是什么...如果可能的话（也是一个好的做法）。

例如，在我的主要组件上，我会有一个反应式 data 对象，其中包含该组件中使用的所有变量...但并不是所有的变量都会被我的可组合项使用。

这是我正在尝试做的事情的示例（有点像可组合模型）...

假设我有一个 useDrivers 可组合项，并且想使用它的 saveDriver 方法，如下所示：

// all shortened for readability
import useDrivers from "@composables/use-drivers";
export default {
  setup() {
    const { saveDriver } = useDrivers();

    const data= reactive({
      foo: null,
      bar: null,
      accident: { ... },
      driver: { ... },
      anotherUsedVar: null,
    });

    // instead of doing something like this:
    saveDriver(driver, accident.id, anotherUsedVar);

    // or even worse:
    saveDriver(driver.name, driver.gender, driver.license, accident.id, anotherUserVar);

    // Could I, somehow, access my DATA const from inside my method?
    // but, again, without having to pass whatever amount of parameters
    saveDriver();
  }
}

Answer 1

如果数据是静态的，它可以是单个上下文对象：

const context = { name: driver.name, ... };
saveDriver(context);

如果数据应该在 saveDriver 内保持反应性，则可以传递计算的引用：

const context = computed(() => ({ name: driver.name, ... });
saveDriver(context);

然后需要在 saveDriver 内处理数据，通常组成 API - computed、watch 等

从可组合项访问主要组件上的数据 - VueJS 3

Access data on main component from composable - VueJS 3

vue.js

vuejs3

vue-composition-api