Vue.js：根据offer.person值动态切换计算属性返回值

你完全可以让计算属性根据offer.person的值动态返回对应的store状态，不需要改成方法。计算属性会自动追踪它依赖的响应式变量，只要offer.person变化，计算属性就会重新计算，逻辑上和方法调用的效果一致，还能享受计算属性的缓存优势。

这里给你两种实现方式：

方式一：条件判断（适合角色较少的场景） #

直接通过if-else判断offer.person的值，返回对应的状态：

computed: {
  specialitySelect() {
    const currentPerson = this.offer.person;
    if (currentPerson === 'physician') {
      return this.$store.state.physicianListSpeciality;
    } else if (currentPerson === 'nurse') {
      return this.$store.state.nurseListSpeciality;
    }
    // 给个默认值，避免没有匹配到角色时返回undefined
    return [];
  }
}

方式二：对象映射（适合未来需要扩展更多角色的场景） #

用对象做映射表，把角色和对应的store状态关联起来，代码更简洁易维护：

computed: {
  specialitySelect() {
    const specialityMap = {
      physician: this.$store.state.physicianListSpeciality,
      nurse: this.$store.state.nurseListSpeciality
      // 以后要加其他角色（比如'therapist'），直接在这里加键值对就行
    };
    // 用逻辑或处理不存在的角色，返回默认空数组
    return specialityMap[this.offer.person] || [];
  }
}

这样修改后，只要this.offer.person的值切换成physician或nurse，计算属性就会自动返回对应的专业列表，和你用方法传参的效果完全一样，而且计算属性会缓存结果，只有当offer.person或者对应的store状态变化时才会重新计算，性能比方法更优。

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