Quiero refactorizar el componente Vue donde los mismos datos vienen en diferentes estructuras.
Ejemplo de componente Appointment.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>En el componente CreateAppointment.vue que usa 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>En AppointmentList.vue que usa Appointment.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>Como puede ver, en CreateAppointment.vue Api devuelve user_id en el objeto user_profile. Pero en ListAppointment.vue, Api devuelve datos en otra estructura. En este caso, dondequiera que se use Appointment.vue, necesito transformar los datos entrantes en la forma que desea Appointment.vue. ¿Cómo debo hacer para evitar esto? (No me es posible cambiar los datos devueltos por la API). Pensé en usar mixin o Wrapper Component. ¿Qué tipo de solución tendría sentido implementar en este y otros casos similares?
Si no puede cambiar el esquema de respuesta de la API, la única forma es mutar los datos de acuerdo con sus necesidades :( Si tiene que hacer lo mismo con user más que en un solo lugar, sugeriría agregar una función de ayuda o una mezcla, de lo contrario, simplemente déjelo como está y extraiga la lógica cuando sea necesario. Por cierto, ¿por qué tiene que obtener los mismos datos varias veces, o no es lo mismo? Puede simplemente emitir un evento desde el componente secundario al componente principal, y maneje la llamada API desde allí. De esta manera, siempre tendrá datos consistentes ...