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

【问题标题】：Vue: How to manipulate and use mappedState data?Vue：如何操作和使用 mappedState 数据？
【发布时间】：2021-12-01 09:42:52
【问题描述】：

我有一个组件使用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它吗？

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案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）。但是，在大多数情况下，计算属性更合适。

【讨论】：

啊，有道理，干杯！