Contenido del curso
Rutas y Componentes con NuxtJS
Backend con Airtable y Netlify Functions
Consumo de nuestro backend con Netlify
Cierre del curso
Context
Sylvester Josué Rojas Cañón
Estudiante
Maria Tohabanda Duchi
EstudianteContenido del curso
Context
Sylvester Josué Rojas Cañón
EstudianteMaria Tohabanda Duchi
Estudiante
Carlos Perilla
Estudiante
Fernando Jorge Bardelli
Estudiante
Diana Martinez
Estudiante
Víctor Julián González Estrada
EstudianteVíctor Julián González Estrada
EstudianteRecomiendo la escuela de English Academy de Platzi para pronunciar correctamente las palabras en inglés.
Router ? :D
Codigo en Nuxt 3:
const { params } = useRoute() const { data: { value: { article } } } = await useAsyncData(() => { const { slug } = params return $fetch(`http://localhost:9999/.netlify/functions/article?slug=${slug}`); }) console.log(article)
Es más funcional, y con funciones integradas en Nuxt
¿Que diferencia habría entre usar AsyncData() y mounted() para cargar los datos de un articulo?
Mounted es un hook del ciclo de vida de los componentes de Vue, eso significa que se ejecuta después de que la página ha cargado en el frontend, ha cargado javascript, y luego se ha montado el componente, por lo que si llamas al API desde ahí, primero cargará tu página vacía, y luego tardará un momento en lo que el backend respone los datos y estos se dibujan.
Mientras tanto, asyncData se asegura de iniciar la petición de datos desde antes de responderle al usuario la página, y para cuándo la página es devuelta al usuario, incluso antes de que carge el javascript, ya vienen los datos que consiguió.
Pues en ayncData la petición al API se hace desde el servidor (o al momento de usar el comando generate para sitios estáticos).
En resumen asyncData te permite que no haya carga inicial con datos vacíos y tiempos de espera del lado del cliente mientras se llenan los datos.
Puedo usar cualquier función del store?, usando asyncData?
Seria así?
asyncData({store}) { code }