如何将响应式数据传递给 Vue 3 中的可组合项

Question

是否可以在 Vue 中声明一个响应式对象，然后将该对象的成员传递给可组合对象，同时保留响应性？

例如：

我声明一个“状态”类型：

type State = { myObjectList: Array<MyObject> }

然后在我的组件中初始化我的状态：

const state = reactive<State>{( myObjectList: new Array<MyObject>() )}

state.myObjectList在组件挂载时通过 API 调用填充的位置

我的问题是，是否可以传递state.myObjectList给可组合项，并且该可组合项是否知道对 内部元素所做的更改state.myObjectList？

即有一个可组合项，例如：

export default function useSimpleCalculator(list: Array<MyObject>){

  const dynamicSumValue = computed(():number => { 
    let sum = 0;
    list.forEach(el => {  sum += el.someValueThatChanges });
    return sum;
  });

 return { dynamicSumValue }

}

然后使用该可组合项，例如：

const {dynamicSumValue} = useSimpleCalculator(state.myObjectList);

并dynamicSumValue随着内部元素的更改而更新state.myObjectList

我尝试像上面那样实现，但是当我传递对象上的任何属性时state，它会在可组合项中失去其反应性。

将refs 传递给可组合项似乎可行（即const val = ref(2)），但这违背了我们团队为组件范围状态数据决定的模式

任何见解都会有帮助

Answer 1

正如您所发现的，您无法将反应性对象的属性传递给函数并维持该属性的反应性。这也经常出现在 props 中，它们只是一个反应对象，比如你的例子中的“state”。您需要将状态转换为 refs 并传递 ref 以使反应性正常工作：

useSimpleCalculator(toRef(state, 'myObjectList'));

或者

const { myObjectList } = toRefs(state);
useSimpleCalculator(myObjectList)

两者都会起作用