Vue中如何操作和使用通过mapState映射的状态数据？

优先推荐将firstTenNames直接定义为计算属性，这是开销最低的实现方式，不需要手动监听，也不需要在data中维护额外的响应式变量。计算属性自带依赖缓存机制，仅当关联的potentialNames、fetchingData状态变化时才会重新计算，其余场景直接返回缓存结果，几乎无额外性能损耗。

修改后的代码如下：

<template>
  <!-- 原模板修正语法问题，判断长度逻辑更严谨 -->
  <div v-if="firstTenNames.length">
  </div>
</template>

<script>
export default {
  computed: {
    ...mapState('user', ['potentialNames', 'fetchingData']),
    firstTenNames() {
      // 请求中或数据格式不符合预期时返回空数组
      if (this.fetchingData || !Array.isArray(this.potentialNames)) {
        return []
      }
      return this.potentialNames.slice(0, 10)
    }
  }
}
</script>

• 监听属性是不是唯一的实现方法？
  不是。仅当你需要在状态更新时执行额外副作用逻辑（比如触发其他异步请求、上报埋点）时，才需要用到监听。单纯的派生状态场景用计算属性完全可以覆盖，且代码更简洁、性能更优。
• store属性可以被watch监听吗？
  完全可以。通过mapState映射到组件的store状态和普通组件属性没有区别，可以直接监听；你也可以直接监听$store下的对应状态。如果确实需要使用监听实现，参考写法如下：

export default {
  data() {
    return {
      firstTenNames: []
    }
  },
  computed: {
    ...mapState('user', ['potentialNames', 'fetchingData']),
  },
  watch: {
    // 监听映射后的store属性
    potentialNames(newVal) {
      if (this.fetchingData || !Array.isArray(newVal)) return
      this.firstTenNames = newVal.slice(0, 10)
    }
  }
}

内容的提问来源于stack exchange，提问作者marisLincoln