与不一致的道具重构VUE组件

Question

我想重构相同数据以不同结构出现的VUE组件。

示例约会。项目组件：

<template>
  <div>
    <div v-if="config.data.user.user_id">
      {{ config.data.user.user_id }}
    </div>
    <div v-if="config.data.user.address.full_address">
      {{ config.data.user.address.full_address }}
    </div>
  .
  .
  .
  </div>
</template>

<script>
  export default {
    name: 'appointment',
    props: {
      config: {
        required: true,
      },
    },
    // Some operations uses 'config' prop
    //.
    //.
    //.
  }
</script>

在createApointment.vue组件中使用appOnIntment.vue：

<template>
  <div>
    <appointment :config="data"/>
  .
  .
  .
  </div>
</template>

<script>
  export default {
    name: 'Create Appointment',
    data() {
      return {
        data: null,
      };
    },
    methods: {
      openAppointment() {
        const result = // api get operation that returns object which I'll use on Appointment.vue
        if (result) {
          const temp = {
            user: null,
          }
          temp.appointment_id = result.appointment_id;
          .
          .
          .
          temp.user.user_id = result.user_profile.user_id;
          .
          .
          .
          this.data = { ...temp };
        }
      }
    }
  }
</script>

intiventlist.vue，使用约会。Vue：

<template>
  <div>
    <appointment :config="data"/>
  .
  .
  .
  </div>
</template>

<script>
  export default {
    name: 'AppointmentList',
    data() {
      return {
        data: null,
      };
    },
    methods: {
      openAppointment() {
        const result = // api get operation that returns object which I'll use on Appointment.vue
        if (result) {
          const temp = {
            user: null,
          }
          temp.appointment_id = result.appointment_id;
          .
          .
          .
          temp.user.user_id = result.user_id;
          temp.user.name = result.user_name;
          .
          .
          .
          this.data = { ...temp };
        }
      }
    }
  }
</script>

by you you in createAppointment.vue api返回user_profile对象中的user_id。但是在ListAppointment.vue中，API返回另一个结构中的数据。在这种情况下，无论何时使用约会，我都需要将传入的数据转换为形状约会。我应该如何避免这种情况？ （我不可能更改从API返回的数据。）我想到使用Mixin或包装器组件。在这种情况和类似情况下，实施什么样的解决方案是有意义的？

Answer 1

如果您无法更改API响应方案，那么唯一的方法是根据您的需求进行突变数据:(
如果您必须使用用户比一个地方进行相同的操作，我建议添加辅助功能或mixin，否则，只需在必要时离开并提取逻辑即可。
顺便说一句，为什么您必须多次获取相同的数据，或者不相同？您可以将事件从子部门发射到父母，然后从那里处理API调用。这样，您将始终拥有一致的数据...