Vuex最佳实践：父组件mapState传值还是子组件直接mapState？

两种方案的优劣对比 #

1. 父组件mapState后传递给子组件 #

这种方式的核心优势是组件职责更清晰、复用性更强：父组件承担数据分发的角色，子组件只需要专注于接收props并完成渲染逻辑，完全不依赖Vuex的具体结构。哪天要是把数据来源从Vuex换成后端API请求，子组件根本不需要修改任何代码。

但它的痛点也很直观：如果组件层级较深，你得一层一层往下传递props（也就是常说的“props drilling”），中间层组件明明不需要这个数据，却得被迫做“搬运工”，后期维护成本会越来越高。

2. 子组件直接使用mapState获取 #

这种方式更直接高效，彻底避免了props drilling的问题，子组件能直接拿到需要的数据，代码更简洁。但代价是子组件和Vuex的耦合度变高——如果后续Vuex的state结构变动（比如someBigArray改名、移到其他模块），所有直接依赖它的子组件都得跟着修改。而且这类子组件的复用性会大打折扣，没法随便放到没有对应Vuex模块的项目里。

关于someBigArray的可用性差异 #

其实这两种方式在数据可用性上没有本质区别：不管是父组件传props还是子组件直接取，都是响应式地获取Vuex里的someBigArray。Vuex的state本身就是响应式的，所以只要someBigArray更新，两种方式下的组件都会自动触发重新渲染。

关于“深度监听后赋值到本地data”的疑问 #

你提到的这种做法确实不太规范，通常是对Vue响应式机制理解不到位才会这么做。实际上完全没必要——不管是通过mapState得到的计算属性，还是父组件传递的props，本身都是响应式的，直接在模板或组件逻辑里使用就可以了。

举个正确的示例：

<!-- 子组件直接mapState的写法 -->
<template>
  <div v-for="item in someBigArray" :key="item.id">
    {{ item.name }}
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: mapState(['someBigArray'])
}
</script>

或是父传子的写法：

<!-- 父组件 -->
<template>
  <Child :the-object="someBigArray"/>
</template>

<script>
import { mapState } from 'vuex'
import Child from './Child.vue'

export default {
  components: { Child },
  computed: mapState(['someBigArray'])
}
</script>

<!-- 子组件 -->
<template>
  <div v-for="item in theObject" :key="item.id">
    {{ item.name }}
  </div>
</template>

<script>
export default {
  props: {
    theObject: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

这两种写法都不需要额外的监听和赋值，Vue会自动追踪响应式数据的变化并触发组件更新。如果你之前不得不这么做，大概率是在某个环节破坏了响应性（比如直接修改数组索引、给对象加新属性时没用到Vue.set），和这两种数据获取方式本身无关。

总结建议 #

• 如果子组件是通用型组件（比如通用表格、列表组件），优先用父传子的方式，保持组件的独立性和复用性。
• 如果子组件是业务紧密绑定的专属组件（比如某个页面的子模块），直接在子组件里用mapState更高效，能减少冗余代码。

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