vue.js - vue3中computed的如下使用方式是否有不妥？

Question

使用的 pinia
按官方的说法，getter相当于computed

那么我这样用:

const curr_data = computed(() => {    return store[`curr_${props.name}_data`].children})

是不是嵌套computed？
我这样写唯一的目的就是简化 template 中的代码，这样做有什么缺点吗？

谢谢。

Answer 1

这样做其实没有什么太大的意义，你这样写的目的是为了监听store的值，如果store的值发生变化则触发computed事件，其实getter中获取的值已经是一个响应式的了，你这里写的computed事件只是监听了一个store的数据变化并返回一个新的数据，内部没有做任何逻辑操作，那为何不直接使用getter呢

Answer 2

首先，你提供的代码片段确实使用了嵌套的computed属性。computed属性在Vue中用于计算数据，其值是基于其依赖的数据进行计算的。

对于你的问题，这样做确实可以简化模板中的代码，因为你可以在模板中直接使用curr_data来代替原来可能复杂的引用。然而，这样做也存在一些潜在的问题和缺点：

1. 性能问题：由于computed属性是响应式的，当其依赖的数据发生变化时，computed属性会重新计算。如果你的store[curr_${props.name}_data].children数据在多个地方或频繁地发生变化，那么你的curr_data computed属性也可能会被频繁地重新计算，这可能会导致性能问题。
2. 可读性问题：虽然你的代码简化了模板，但使用了嵌套的computed属性可能会使代码更难阅读和理解。其他开发者可能需要花更多的时间来理解你的代码。
3. 可维护性问题：如果以后需要修改curr_data的计算逻辑，你需要在多个地方进行修改，这可能会增加代码的维护成本。
4. 可能的bug：如果你不小心改变了store[curr_${props.name}_data].children的值，但忘记了重新计算curr_data，可能会导致数据不一致的问题。

因此，虽然使用嵌套的computed属性可以达到代码简化的目的，但在实际使用时还是需要权衡这些潜在的问题。如果性能问题成为一个问题，或者代码的可读性和可维护性受到了影响，你可能需要考虑其他的方案，比如使用methods或者使用其他的状态管理方案等。