从 getter 设置数据字段并添加额外的计算字段

Question

我想使用 getter 在数据中设置字段：

export default {
 data () {
    return {
        medications: [],
       }
   },
  computed: {
  ...mapGetters([
        'allMedications',
        'getResidentsById',
    ]),

我想设置medications = allMedications，我知道我们可以使用{{allMedications}}，但我的问题是假设我有：

medications {
    name: '',
    resident: '', this contains id
    .......
   }

现在我想致电 getResidentsById 并在 medications 上设置一个额外字段：

  medications {
    name: '',
    resident: '', this contains id
    residentName:'' add an extra computed field
    .......
   }

我是这样做的：

watch: {
  allMedications() {
      // this.medications = this.allMedications
      const medicationArray = this.allMedications
      this.medications = medicationArray.map(medication => 
    ({
        ...medication,
        residentName: this.getResidentName(medication.resident)
    })
    );
    },
 },
 method: {
    getResidentName(id) {
      const resident = this.getResidentsById(id)
      return resident && resident.fullName
    },
  }

但这似乎有问题，因为只有当 allMedications 发生变化时，watch 上的方法才会激活并设置 residentName。 p>

Answer 1

在这种情况下，您会希望在创建组件后立即运行观察程序。您可以在方法中移动逻辑，然后从观察者和创建的钩子中调用它，但有一种更简单的方法。

您可以使用观察者的long-hand version 来传递immediate: true 选项。这将使它在计算属性被解析后立即运行。

watch: {
  allMedications: {
    handler: function (val) {
      this.medications = val.map(medication => ({
        ...medication,
        residentName: this.getResidentName(medication.resident)
      });
    },
    immediate: true
  }
}