Vue：如何操作和使用mappedState数据？

Question

我有一个组件使用 mapState 从用户存储中提取 2 个不同的状态。在用户存储中，它进行 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://vuejs.org/v2/guide/computed.html#Watchers）。但是，在大多数情况下，计算属性更合适。

Vue：如何操作和使用mappedState数据？

Vue: How to manipulate and use mappedState data?

vue.js

vuex

vuejs2