Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Crea una cuenta y continúa aprendiendo 🚀
Regístrate o inicia sesión para continuar aprendiendo:
Frontend
Aprendiz
Mismo componente distinto estado & Vue Extension
En esta lección vemos cómo el estado de cada instancia de un componente es independiente. También instalamos la extensión de Vue para la DevTools.
Uso de Vue Router para gestionar rutas
En las lecciones anteriores hemos visto cómo hacer uso de Vue Router para definir algunas rutas y tener un componente por cada una de ellas.
Lo que queremos hacer ahora es desplazar el carrito de compras hacia la ruta cart para que en home sólo tengamos productos.
Para esto, vamos a empezar desde nuestro componente principal y revisar qué es lo que contiene.
No olvidemos siempre subir nuestros cambios.
Revisión del componente principal
Bien, nuestro componente app en su interior tiene un componente v.app que contiene un v.main con un v-container y luego nuestro RouterView, que es el que se encarga de mostrar el contenido de cada una de las páginas que visitamos.
Por ejemplo, cuando se visita la ruta home, en nuestro HomeView estamos mostrando el componente ProductList.
Nuestro home tiene un estado. Sin embargo, si revisamos el componente ProductList, vemos que este componente sí tiene un estado que es justamente los productos y los detalles.
Nosotros podemos fácilmente llevar el cart a la vista de CartView de esta manera. Sin embargo, no tenemos acceso a los detalles.
Importación del componente cart
Para que podamos usar este componente dentro de nuestro CartView, tenemos que importarlo.
Aquí vamos a poner export default y vamos a declarar una sección de componentes.
Aquí vamos a poner el componente cart y lo vamos a importar desde components/Cart.vue.
Con esto guardamos y en nuestro navegador vamos a ver que el componente cart ya se muestra para la ruta cart.
Sin embargo, si nosotros agregamos productos, esto se muestra en HomeView, pero no se muestran aquí.
Generalizar el estado para ambas vistas
Lo que pasa es que estos componentes se encuentran separados.
¿De qué manera podemos generalizar el estado para que sea accesible desde ambas páginas?
Una alternativa sería declarar un estado sobre nuestro componente app.vue, que es nuestro componente principal.
Aquí nosotros podríamos declarar algunas variables y pasarlas como props a nuestro RouterView, de tal manera que se encuentre disponible.
Uso de Vue DevTools para inspección
Para comprender esto mejor, vamos a presionar F12 en Chrome y seleccionar la pestaña Vue.
Si no tienes una pestaña Vue aquí en Chrome, puedes cargar la extensión de Vue para las developer tools de Chrome.
Simplemente escribes "Vue DevTools", accedes al primer resultado de la tienda de Chrome y aquí tendrás un botón para instalar.
En mi caso me dice "Eliminar" porque ya lo tengo instalado.
Tras hacer esto, podrás ver esta ventana al lado derecho. Esto es útil porque nos permite ver los componentes de nuestro proyecto.
Por ejemplo, si expandimos v.main vemos que tiene un v-container, y si lo expandimos vemos un RouterView.
Ese RouterView representa a cada una de las vistas.
Si nosotros nos vamos a cart, el RouterView es el contenido siempre.
Si nos vamos a about, el RouterView es este otro de aquí.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
En las lecciones anteriores hemos visto cómo hacer uso de Vue Router para definir algunas rutas y tener un componente por cada una de ellas. Lo que queremos hacer ahora es desplazar el carrito de compras hacia la ruta "cart" para que en "home" sólo tengamos productos. Para esto vamos a empezar desde nuestro componente principal y vamos a revisar qué es lo que contiene. No olvidemos siempre subir nuestros cambios. Bien, nuestro componente "app". En su interior tiene un componente "v.app" que contiene un "v.main" con un "v-container" y luego nuestro "RouterView", que es el que se encarga de mostrar el contenido de cada una de las páginas que visitamos. Por ejemplo, cuando se visita la ruta "home" nosotros en nuestro "HomeView" estamos mostrando el componente "ProductList", nuestro "home" y uno tiene un estado. Sin embargo, si revisamos el componente "ProductList", vemos que este componente sí tiene un estado que es justamente los productos y los detalles. Nosotros podemos fácilmente llevar el "cart" a la vista de "CartView" de esta manera. Sin embargo, no tenemos acceso a los detalles. Para que podamos usar este componente dentro de nuestro "CartView". Tenemos que importarlo. Aquí vamos a poner "export default" y vamos a declarar una sección de componentes y aquí vamos a poner el componente "cart" y el componente "cart" lo vamos a importar desde “componentsCart.vue”. Con esto guardamos y en nuestro navegador vamos a ver que el componente "cart" ya se muestra para la ruta "cart". Sin embargo, si nosotros agregamos productos, esto se muestra en "HomeView", pero no se muestran aquí. Lo que pasa es que estos componentes se encuentran separados. ¿De qué manera podemos generalizar el estado para que sea accesible desde ambas páginas? Una alternativa sería declarar un estado sobre nuestro componente "app.vue", que es nuestro componente principal. Aquí nosotros podríamos declarar algunas variables y pasarlas como "props" a nuestro "RouterView" de tal manera que se encuentre disponible. Para comprender esto mejor vamos a presionar F12 en Chrome y vamos a seleccionar la pestaña Vue. Y si tú no tienes una pestaña Vue aquí en Chrome, puedes cargar la extensión de Vue para la developer tools de Chrome. Simplemente escribes Vue devtools, accedes al primer resultado de la tienda de Chrome y aquí tendrás un botón para instalar. En mi caso me dice eliminar porque ya lo tengo instalado. Tras hacer ello, podrás ver esta ventana aquí al lado derecho. Esto es útil porque nos permite ver los componentes de nuestro proyecto. Por ejemplo, si expandimos “v.main” vemos que tiene un "v-container" y si lo expandimos vemos un "RouterView". Ese "RouterView" representa a cada una de las vistas, Si nosotros nos vamos a “cart”, el "RouterView" es el contenido siempre. Si nos vamos a “about” el “RouterView”, es este otro de aquí.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript