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
Nuevo componente para nuestro v-app-bar
A fin de organizar mejor nuestro proyecto vamos a definir un nuevo componente, llamado TopBar, representando a nuestra barra de navegación superior.
Accediendo a la Cantidad de Elementos en el Store
Antes de acceder a la cantidad de elementos en el store, es importante organizar el código. Actualmente, el componente AppBar está dentro del componente App, lo cual no es recomendable.
La idea es que cada componente sea puntual. El componente App solo debe mostrar que tiene un AppBar y un RouterView, nada más.
El AppBar es un componente distinto y debe estar en su propio archivo.
Creando el Componente TopBar
En la carpeta components, creamos un nuevo archivo llamado TopBar. Aquí dentro, agregamos una sección template y trasladamos el v-app-bar a este nuevo componente.
Guardamos los cambios y en el componente App, reemplazamos el código para mostrar TopBar de la siguiente manera:
<TopBar />
Ajustes en el RouterLink
El RouterLink ya no se encuentra en uso en App, ya que ahora está dentro de TopBar. Sin embargo, el RouterView sigue siendo necesario, por lo que lo dejamos en su lugar.
Agregamos una sección script, indicando que estamos usando TypeScript, e importamos RouterLink, que permite definir enlaces hacia las rutas.
<script lang="ts">
import { RouterLink } from 'vue-router';
</script>
Guardamos los cambios y verificamos en el navegador.
Resolviendo el Error de Importación
Si TopBar desaparece, revisamos la consola de Chrome.
El error indica que el componente TopBar no existe en App. Para solucionarlo, debemos importarlo y declararlo en la sección de components.
import TopBar from '@/components/TopBar.vue';
export default {
components: {
TopBar,
},
};
Guardamos los cambios y ahora TopBar aparece correctamente con los enlaces Home, Cart y About.
En Cart, tenemos un badge.
Accediendo a la Cantidad de Items en el Carrito
Ahora que TopBar está separado, podemos escribir código más libremente.
El siguiente paso es traer desde el store la cantidad de items en el carrito.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
¿De qué manera podemos acceder a la cantidad de elementos? Podemos preguntar eso al store, ya que tenemos un store dedicado al carrito. Sin embargo antes de hacer ello, lo primero es organizar un poco nuestro código, porque tenemos todo este componente app bar dentro del componente app es uno es recomendable La idea es que cada componente sea bastante puntual. El componente app simplemente debería mostrarnos que tiene un app bar, y que tiene un router view, nada más. El app bar es un componente distinto y debería ser tratado en su propio archivo. Entonces aquí en components vamos a crear un archivo nuevo. y lo vamos a llamar top bar. para recordar que es una barra que se encuentra en la parte superior. Aquí dentro vamos a agregar una sección template y vamos a llevar todo este v-app bar a donde corresponde. Guardamos, y aquí tenemos que mostrar top bar, de esta manera. Como vemos, aquí router link ya no está en uso, porque router link se encuentra más bien dentro del top bar. Lo que sí está en uso es el Router View. Entonces eso lo dejamos allí y vamos a agregar aquí arriba una sección de script, indicando que estamos usando TypeScript, y entonces vamos a importar Router Link. Este router link es el que nos permite definir enlaces hacia nuestras rutas. Guardamos. Si volvemos al navegador vemos que desapareció el top bar, sin embargo la consola de chrome nos ayuda a entender por qué. Nos dice que hubo un fallo al intentar resolver el componente top bar, o sea que para el componente app top bar no existe. Tenemos que importar top bar en el componente app para poder usarlo. Vamos a escribir entonces import top bar from components, slash, top bar. Para este top bar vamos a hacer uso también de Options API. Vamos a agregar por aquí un export default, devolviendo un objeto. Guardamos esto, y vemos que el import ya se resuelve correctamente. Sin embargo a pesar que estamos importando top bar, no basta solo con importar. En el caso de Options API, tenemos que declarar también una sección de components. Por lo tanto aquí vamos a agregar un export default, en el componente app y vamos a definir un objeto de components. Y aquí vamos a poner top bar, ¿sí? Guardamos y ahora sí que aparece nuestro top bar. Tenemos Home, tenemos Cart, tenemos About. Y aquí en Cart tenemos un badge. Como ya separamos nuestro top bar, ahora podemos escribir más libremente cualquier código que queramos, para el top bar. En este caso queremos traer desde el store la cantidad de items en el carrito.
¿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