Vue.js中如何通过Props从Vuex State中获取指定状态项

我明白你的需求啦——你想通过子组件接收的fromSelected prop，动态从Vuex的state里拿到对应key的状态值对吧？现在的写法之所以没效果，是因为你用了点语法直接访问fromSelected，而不是根据prop的值去动态查找。来看看怎么改：

推荐方案：使用计算属性 #

计算属性是Vue里处理这类动态数据的最佳实践，它不仅清晰易维护，还能自动响应prop或state的变化：

<template>
  <h1>{{ targetStateValue }}</h1>
</template>

<script>
export default {
  props: ['fromSelected'],
  computed: {
    targetStateValue() {
      // 用方括号语法，根据prop的值动态访问state属性
      return this.$store.state[this.fromSelected]
    }
  }
}
</script>

简化方案：直接在模板中动态访问 #

如果你的场景比较简单，也可以直接在模板里用方括号语法实现，省去计算属性：

<template>
  <h1>{{ $store.state[fromSelected] }}</h1>
</template>

<script>
export default {
  props: ['fromSelected']
}
</script>

为什么原来的写法不行？ #

你之前写的this.$store.state.fromSelected用的是点语法，它会严格去查找Vuex state里key为fromSelected的属性，但你的state里只有one这个key，自然拿不到想要的值。而方括号语法this.$store.state[this.fromSelected]会先读取propfromSelected的实际值（也就是你父组件传入的"one"），再用这个值作为key去访问state对应的属性，这样就能正确拿到state.one的值了。

额外优化：避免不存在的key报错 #

如果担心父组件传入的prop值在state里不存在，可以在计算属性里加个判断，避免控制台报错：

targetStateValue() {
  const stateKey = this.fromSelected
  // 先检查state中是否存在该属性，不存在则返回默认值
  return this.$store.state.hasOwnProperty(stateKey) 
    ? this.$store.state[stateKey] 
    : '未找到对应状态'
}

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