如何将反应性数据传递给 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 对象上的任何属性时，它在可组合项中失去了反应性。

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

任何见解都会有所帮助

Answer 1

正如您所发现的，您不能将反应对象的属性传递给函数并保持该函数的反应性属性。这也经常出现在 props 中，它只是一个反应对象，例如 'state' 在您的示例中。您需要将您的状态转换为 refs 并传递一个 ref 以使反应性正常工作：

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

或

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

两者都有效

Answer 2

Refs 专门用于需要通过引用传递值（因此得名）的情况。

因为 list 不应该被修改，它可以只是一个计算参考：

const myObjectList = computed(() => state.myObjectList);
useSimpleCalculator(myObjectList);

和

function useSimpleCalculator(list: Ref<Array<MyObject>> | ComputedRef<Array<MyObject>>){...}

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

How to pass reactive data to a composable in Vue 3

typescript

vue.js

vuejs3

vue-reactivity