typescript - 如何将 react 数据传递给 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);

并在 state.myObjectList

中的元素发生更改时更新 dynamicSumValue

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

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

任何见解都会有所帮助

Answer 1

正如您所发现的，您不能将 react 性对象的属性传递给函数并保持该属性的 react 性。这也经常出现在 Prop 上，在您的示例中， Prop 只是一个 react 性对象，例如“状态”。您需要将您的状态转换为 refs 并传递一个 ref 以使 react 性正常工作:

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

或

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

两者都可以工作