Mismo componente distinto estado & Vue Extension

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í.

Crea una cuenta y continúa aprendiendo 🚀

Mismo componente distinto estado & Vue Extension