如何将反应性数据传递给Vue 3中的可组合数据
如何将反应性数据传递给Vue 3中的可组合数据
提问于 2022-01-25 12:28:43
是否可以在Vue中声明一个反应性对象，然后在保留反应性的同时将该对象的成员传递给可组合的对象？
例如：
我宣布为“国家”类型：
type State = { myObjectList: Array<MyObject> }然后在我的组件中初始化我的状态：
const state = reactive<State>{( myObjectList: new Array<MyObject>() )}通过组件挂载上的API调用填充state.myObjectList
我的问题是，是否有可能将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) )，但这与我们团队为组件范围内的状态数据决定的模式背道而驰。
任何洞察力都会有帮助
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-01-25 12:52:11
正如您已经发现的，您不能将反应性对象的属性传递给函数并维护该属性的反应性。这也经常出现在道具上，在你的例子中，道具只是一个像'state‘这样的反应性对象。您需要将状态转换为refs，并传递一个reactiveforreactive才能正常工作：
useSimpleCalculator(toRef(state, 'myObjectList'));或
const { myObjectList } = toRefs(state);
useSimpleCalculator(myObjectList)两者都会起作用吗
Stack Overflow用户
发布于 2022-01-25 12:57:31
在需要通过引用传递值(因此是名称)的情况下，参考文献被特别使用。
由于list不应该被修改，所以它可以只是一个计算的引用：
const myObjectList = computed(() => state.myObjectList);
useSimpleCalculator(myObjectList);和
function useSimpleCalculator(list: Ref<Array<MyObject>> | ComputedRef<Array<MyObject>>){...}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70855278
复制相关文章
相似问题
Vue数据属性非反应性
Vue.js -如何将非反应性数据传递给子组件
Vue反应性:通过提供和注入创建反应性数据
Post请求Vue上的数据反应性
Vue JS -数据未进行反应性更新
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
