Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
Continuemos organizando nuestros componentes. Ahora creamos un nuevo componente CategoryOptions y renombramos nuestro componente principal de la izquierda por LeftMenu.
De hecho, vamos a continuar refactorizando debido a que este componente todavía tiene muchos elementos en su sección de template.
Ya habíamos desplazado anteriormente las opciones de orden a un nuevo componente orderOptions
y quedó pendiente.
Quedó como tarea que puedas desplazar esto a otro componente llamado categoryOptions
, con las opciones de categorías.
Si no lo hiciste, no hay problema, porque vamos a verlo ahora.
Entonces vamos a cortar esto y lo vamos a llevar a un nuevo componente.
Aquí tenemos una carpeta left
para los componentes que se muestran al lado izquierdo.
Vamos a crear un nuevo archivo y lo vamos a llamar categoryOptions
.
No olvidemos que debe tener extensión .vue
, ya que se trata de un “single file component”.
Dentro de unas etiquetas template pegamos lo que habíamos cortado.
Estas opciones de categoría invocan los métodos clearCategory
y goToCategory
.
Además, acceden a la información de las categorías.
Por lo tanto, vamos a necesitar una sección de script en la parte superior.
Vamos a copiar toda esta sección de script que estaba antes en CategoryList
y lo vamos a ubicar aquí en CategoryOptions
.
Necesitamos acceso al estado y a estos dos métodos para responder ante los clics de los usuarios.
Tenemos que tener cuidado con los import
.
Por ejemplo, CategoryOptions
no va a importar OrderOption
.
CategoryOptions
puede acceder al store
, pero tiene que ponerse uno o dos puntos más porque estamos saliendo de la carpeta left
para ir a components
.
Luego salimos una vez más de components
para entrar a stores
y finalmente a categories
.
Tenemos nuestras opciones de la categoría ya separadas.
CategoryList
ya no va a necesitar los métodos ni la computed property
de categories
, porque simplemente va a mostrar OrderOptions
y CategoryOptions
.
Aquí agregamos categoryOptions
y tenemos que importar:
import category options from
Accedemos a la carpeta left
y de manera específica a CategoryOptions.vue
.
Finalmente, podemos usar el componente CategoryOptions
.
El menú de la izquierda tiene CategoryOptions
y tiene OrderOptions
.
Cada uno tiene sus propias responsabilidades.
Por ejemplo, CategoryOptions
se encarga de pintar la lista de categorías y también la opción de todas las categorías.
Responde ante estos dos métodos y además itera sobre el estado de categories
.
De la misma manera, OrderOptions
también tiene su propia responsabilidad.
OrderOptions
se encarga de ordenar en base al criterio que el usuario seleccione invocando al action
que corresponda dentro de ProductsStore
.
De esta manera, CategoryList
queda mucho más entendible.
Este componente no sólo contiene opciones de categorías, también contiene opciones de orden.
Es mejor renombrarlo.
Es mejor que no se llame CategoryList
.
Es mejor que se llame leftMenu
porque es un menú que está ubicado al lado izquierdo.
Como ya tenemos una carpeta left
, lo vamos a ubicar allí para un mayor orden.
Hay que tener cuidado cada vez que desplazamos archivos, porque los import
de este componente tienen que resolverse adecuadamente.
¿Qué componente contiene a leftMenu
?
El componente que lo contiene es nuestra vista de home
, que es homeVue
.
HomeVue
hace uso de ProductList
que es el contenido del lado derecho.
Hace uso de CategoryList
, que es lo que tenemos al lado izquierdo.
Pero ahora ya no se llama CategoryList
, sino que se llama leftMenu
.
Sigue funcionando y no hay errores porque se está importando leftMenu
con el nombre de CategoryList
.
Es mejor reemplazarlo para evitar confusión.
En vez de CategoryList
vamos a llamarlo leftMenu
.
En Visual Studio Code con Ctrl+D seleccionamos las coincidencias para reemplazar todas a la vez.
Luego de organizar mejor nuestro código, es recomendable ejecutar el comando npm run lint
.
Verificamos si hay alguna recomendación del linter
.
En este caso no hay ningún error, pero sí nos marca tres warning
.
El primero ocurre en index.ts
de router.
Nos vamos a la carpeta de router
y abrimos index
.
Este import
no se está usando. Lo quitamos.
Ya no se usa porque el import
se hace de manera dinámica.
Guardamos.
Tenemos dos warning
en HomeVue
.
Abrimos HomeVue
.
El primer warning
aparece en la línea 17.
Nos dice que from
es un argumento que lo estamos definiendo, pero no lo estamos usando.
En JavaScript, si no usamos uno de los argumentos, podemos omitirlo.
Guardamos.
Ejecutamos nuevamente el linter.
Ya no muestra nada, lo que quiere decir que hemos corregido los tres problemas exitosamente.
Actualizamos en el navegador.
Verificamos si hay algún error en tiempo de ejecución.
Hay un error 404 de Not Found.
No se está encontrando el archivo leftMenu
en HomeVue
.
Revisamos en HomeVue
cómo estamos haciendo el import
.
leftMenu
se está importando desde components/left/leftMenu
.
Aquí hay un .js
. Vamos a quitarlo.
Actualizamos.
Presionamos F12.
Ya no hay ningún error.
Podemos filtrar por categoría.
Podemos ordenar desde el más costoso al menos costoso.
Podemos ordenar de manera alfabética desde la Z a la A.
El filtro por categorías funciona, al igual que el criterio de orden que estamos aplicando.
No olvidemos seleccionar todos nuestros cambios y hacer un commit
correspondiente a lo último que hemos modificado.
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 hecho, vamos a continuar refactorizando debido a que este componente todavía tiene muchos elementos en su sección de template. Ya habíamos desplazado anteriormente las opciones de orden a un nuevo componente “orderOptions” y quedó pendiente. Quedó como tarea que puedas desplazar esto a otro componente llamado “categoryOptions”, con las opciones de categorías. Si no lo hiciste, no hay problema, porque vamos a verlo ahora. Entonces vamos a cortar esto y lo vamos a llevar a un nuevo componente. Aquí tenemos una carpeta "left" para los componentes que se muestran al lado izquierdo. Vamos a crear un nuevo archivo y lo vamos a llamar “categoryOptions”. No olvidemos que debe tener extensión punto "vue", ya que se trata de un “single file component”. Dentro de unas etiquetas template pegamos lo que habíamos cortado. Como vemos, estas opciones de categoría invocan los métodos “clearCategory” y “goToCategory”. Además, acceden a la información de las categorías. Por lo tanto, vamos a necesitar una sección de script en la parte superior. De hecho, vamos a copiar toda esta sección de script que estaba antes en “CategoryList” y lo vamos a ubicar aquí en “CategoryOptions”. Lo que necesitamos básicamente es acceso al estado y estos dos métodos para responder ante los clics de los usuarios, sin embargo, tenemos que tener cuidado con los "import". Por ejemplo, “CategoryOptions” no va a importar “OrderOption”. “CategoryOptions” puede acceder al "store", pero tiene que ponerse uno o dos puntos más porque estamos saliendo de la carpeta "left" para ir a “components”. Luego salimos una vez más de “components” para entrar a “stores” y finalmente a “categories”. De esta manera tenemos nuestras opciones de la categoría ya separadas. Y aquí esto que antes se llamaba “CategoryList”, ya no va a necesitar los métodos ni la “computed property” de categories, porque simplemente va a mostrar “OrderOptions” y “CategoryOptions”. Por lo tanto, aquí agregamos category options y tenemos que importar: "import category options from” Accedemos a la carpeta "left" y de manera específica a “CategoryOptions.vue". Finalmente, aquí ya podemos usar el componente “CategoryOptions”. De esta manera, entonces el menú de la izquierda tiene “CategoryOptions” y tiene “OrderOptions”. Cada uno tiene sus propias responsabilidades. Por ejemplo, “CategoryOptions” se encarga de pintar la lista de categorías y también la opción de todas las categorías. Responde ante estos dos métodos y además itera sobre el estado de categories. Como se puede observar acá. De la misma manera, “OrderOptions” también tiene su propia responsabilidad. “OrderOptions” se encarga de ordenar en base al criterio que el usuario seleccione invocando al “action” que corresponda dentro de “ProductsStore”. Entonces, de esta manera “CategoryList” queda mucho más entendible. Sin embargo, este componente no sólo contiene opciones de categorías, también contiene opciones de orden. Por lo tanto, es mejor renombrarlo. Es mejor que no se llame “CategoryList”. Es mejor que se llame "leftMenu” porque es un menú que está ubicado al lado izquierdo y como nosotros ya tenemos una carpeta "left", lo vamos a ubicar allí para un mayor orden. Aquí hay que tener cuidado cada vez que desplazamos archivos, porque los "import" de este componente tienen que resolverse adecuadamente. En este caso la pregunta sería ¿Qué componente contiene a “leftMenu”? El componente que lo contiene en este caso es nuestra vista de “home”, que es “homeVue" “HomeVue" hace uso de “ProductList” que es el contenido que tenemos al lado derecho y hace uso de “CategoryList” que es lo que tenemos aquí al lado izquierdo. Pero ahora ya no se llama “CategoryList”, sino que se llama "leftMenu”. Aquí continúa funcionando y no hay errores porque se está importando “leftMenu” con el nombre de “CategoryList”. Sin embargo, es mejor reemplazarlo para evitar confusión en vez de “CategoryList” vamos a llamarlo “leftMenú” en Visual Studio Code con Ctrl+D estoy seleccionando las coincidencias para poder reemplazar todas a la vez. Como siempre, luego de organizar mejor nuestro código, es recomendable ejecutar el comando “npm run lint” para ver si tenemos alguna recomendación de parte del “linter” En este caso no hay ningún error, pero sí nos marca tres “warning”. El primero de ellos ocurre en “index.ts” de router. Nos vamos a nuestra carpeta de “router” y abrimos “index”. Aquí nos dice que este "import" no se está usando. Lo vamos a quitar. Ya no lo usamos porque el "import" se hace de manera dinámica. Cuando un usuario accede a una página, nosotros importamos de manera dinámica el componente que se requiere. Guardamos. Luego tenemos dos warning en "HomeVue". Vamos a abrir "HomeVue" y el primer warning está apareciendo en la línea 17. Aquí. Nos dice que “from” es un argumento que lo estamos definiendo, pero no lo estamos usando. En JavaScript, si nosotros no usamos uno de los argumentos, podemos omitirlo y simplemente vamos a obtener acceso al primer argumento. Bueno, entonces aquí guardamos y vamos a ejecutar nuevamente el Inter. Como ya no nos muestra nada, quiere decir que hemos corregido los tres problemas exitosamente. Ahora sí, vamos a actualizar en el navegador y ver si encontramos algún error en tiempo de ejecución. Aquí tenemos un primer error. Estamos obteniendo un error de 404 de Not Found. No se está encontrando el archivo "leftMenu” en “HomeVue”. Revisemos en "HomeVue" cómo estamos haciendo el "import". Aquí tenemos "leftMenu”. "leftMenu se está importando desde “components”, "left", "leftMenu". Pero aquí hay un punto js. Entonces vamos a quitarlo. Actualizamos, presionamos F12 y como vemos, ya no hay ningún error. Podemos filtrar por categoría. Podemos ordenar desde el más costoso al menos costoso. Podemos ordenar de manera alfabética desde la Z a la A y como vemos, el filtro por categorías funciona al igual que el criterio de orden que estamos aplicando. Como siempre, no olvidemos seleccionar todos nuestros cambios y hacer un “coomit” correspondiente a lo último que hemos modificado.
¿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
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.