Nuevo componente para nuestro v-app-bar

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

¡Suscríbete y continúa aprendiendo!

Nuevo componente para nuestro v-app-bar