Vue:如何操作和使用mappedState数据?

Question

我有一个组件，它使用mapState从用户存储中拉入两种不同的状态。在用户存储中，它发出一个GQL调用并获得potentialNames的列表。在等待查询时，fetchingData为true，之后设置为false。

<template>
<div v-if="firstTenNames>
</div>
</template>
export default ({
data: {
return() {
firstTenNames: [],
}
},
computed: {
...mapState('user', ['potentialNames', 'fetchingData']),
}
});

我希望能够知道一旦数据被获取，potentialNames有一个值，这样我就可以splice关闭前10个名称，并将其设置为firstTenNames。有没有不昂贵的方法?我在考虑照看房子，但这是唯一的办法吗?此外，如果它是一个存储属性，你甚至可以watch它吗?

Answer 1

解决方案是将firstTenNames转换为计算属性

<script>
export default {
computed: {
...mapState(['potentialNames', 'fetchingData']),
// whenever `potentialNames` changes
// this property is automatically recomputed
firstTenNames() {
// could be `null`, depending on your code
if (this.potentialNames) {
return this.poentialNames.slice(0, 10)
}
return []
}
}
}
</script>

firtTenNames仅基于另一个状态(potentialNames)计算。在这种情况下，使用计算属性来确保自动同步要容易得多。

是的，您可以通过将firstTenNames存储在data中并为potentialNames添加监视器来实现相同的目的。这只是更多的工作，而且容易出错，特别是如果你的状态依赖于多个其他值(例如，你很容易忘记添加一些观察者)。

在某些情况下，确实需要使用监视器(参见https://v2.vuejs.org/v2/guide/computed.html#Watchers)。但是，在大多数情况下，计算属性更合适。