La aplicación en el evento created ejecuta la solicitud AJAX al servidor para obtener un estado. En el evento mounted, la aplicación activa la devolución de llamada de carga con el estado para permitir al desarrollador decidir qué hacer a continuación.

Depende del estado La aplicación debe redirigir al usuario o mostrar el mensaje. Hasta que AJAX esté en progreso, el usuario debería ver el ícono de carga.

Aquí hay un problema asincrónico. En el evento created, una solicitud ya se envió y la aplicación se activó mounted, pero la solicitud aún se ejecuta en segundo plano. Y el desarrollador recibe el estado predeterminado.

¿Cómo esperar el estado del backend y solo después del evento de fuego mounted?

1
Ilya Manyahin 17 ene. 2018 a las 15:20

3 respuestas

La mejor respuesta

Si realmente siente que necesita retrasar el ciclo montado: Al mirar el ciclo de vida aquí, indica si no hay una opción 'el' en el componente, entonces puede llamar manualmente a mount usando vm. $ mount (el).

Sin embargo, ¿no podría usar el gancho del ciclo de vida beforeUpdate? Entonces, en lugar de retrasar la función de montaje (retrasar el montaje del componente parece una mala idea), ¿devuelve los datos de la solicitud que activa el beforeUpdate?

2
DanPottsHimself 17 ene. 2018 a las 13:57

Otro método simple es usar v-if, así:

<div class="status" v-if="requestDone">status</div>
<div class="loading" v-else>loading</div>

En js:

data() {
    return {
        requestDone: false
    }
}

created() {
    promise.then(() => {
        ...
        this.requestDone = true
    })
}

El ajuste de estado se procesará hasta que requestDone se convierta en true.

1
MervynYang 18 ene. 2018 a las 09:53

Un mejor enfoque para manejar este escenario es usar NavigationGuards en vue-router.

beforeRouteEnter ayuda a decidir si se debe cargar un componente particular asociado al enrutador o si se debe navegar a otra ruta antes de cargar el componente.

beforeRouteEnter Viene con el siguiente controlador. Solo cuando se invoca next, el componente se cargará. Este protector es un área perfecta para solicitudes AJAX.

next()/next(true) - continúa con la navegación. Esto se puede usar cuando se resuelve la promesa

next(false) - la navegación no ocurre.

 beforeRouteEnter (to, from, next) {
    // called before the route that renders this component is confirmed.
    // does NOT have access to `this` component instance,
    // because it has not been created yet when this guard is called!
  },

Una vez que la navegación de ruta es decidida por beforeRouteEnter guard, se pueden invocar ganchos de ciclo de vida de componentes como created() or mounted() para acciones adicionales

Referencia: https://router.vuejs.org /en/advanced/navigation-guards.html

1
divine 17 ene. 2018 a las 13:00