Duda sobre dónde gestionar la petición de información al acceder a un recurso


#1

Hola,

tengo la siguiente duda. Imaginemos que accedo a /documentos/:documentId.

el componente que carga esta vista la utilizo tanto para crear como para modificar, siendo modificar cuando $route.params.documentId.length > 0

En ese caso, necesito pedir información a backend. Dentro de esto, tengo un proceso con cuatro componentes que se cargan con componente :is. A backend le pido el objeto que contiene la información de las cuatro vistas.

Mi planteamiento era, en el ROUTER en el beforeEnter, hacer la petición a backend para conseguir la información, o mejor, lanzar una acción, que en su respuesta haga una mutation y que me setée en el estado el objeto global.

Desde dentro de estas subvistas mapear las props de ese objeto dentro del estado que voy a utilizar en esas vistas, y en el beforeMount, cargarlas en mi estado local, ya que se podrá editar, y hasta que no se guarde no se actualizará el estado, ni se enviará a backend la actualización.

Mis dudas son las siguientes:

  • Dónde debo gestionar esa petición de información en ese caso, en el router, o en el componente grande que engloba toda esta info?
  • Me he encontrado con el problema de que el beforeMount de los componentes hijos se ejecuta antes de que haya terminado la petición y por tanto al intentar hacer this.estadolocal = this.estadomapeado, el estado mapeado aún está vacío.
  • La solución, que no sé si es la correcta, y es por lo que quiero valorar un poco todo esto es, en cada componente hijo hago la petición, y me cargo en estado local las cosas que quiero para después adjuntarlas al objeto y enviarlas. Replico mucho trabajo, pero hasta que no he recibido la petición, no puedo setear mi estado local con esa respuesta, porque si no estaría vacío.

Muchas gracias.


#2

Hola. ¿Estás utilizando Vuex también, o no?


#3

En la app sí, en mi solución no.

¿por qué? necesitaba en las vistas de los componentes hijos cargadas en el component:is que en el mounted cargase el estado que venía de backend, al estado local de la aplicación para poder modificarlo y después, cuando el usuario pulse en guardar, mandarlo a backend con una action y modificarlo también en el estado.

¿qué ocurría? que en el componente padre hacía la petición para setear el estado con el modelo de datos de backend, y la petición tarda unos ms más que lo que tarda el hook del componente hijo, entonces al hacer en el hijo

mounted: {
this.localState = this.$store.state…
}

el estado todavía estaba vacío