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
Componente: CategoryOptions
Continuemos organizando nuestros componentes. Ahora creamos un nuevo componente CategoryOptions y renombramos nuestro componente principal de la izquierda por LeftMenu.
Refactorizando el Componente
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.
Creación de CategoryOptions
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.
Consideraciones sobre los Imports
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.
Separación de Responsabilidades
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.
Renombrando CategoryList
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.
Ajustando en HomeVue
¿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.
Validación con Linter
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.
Revisando HomeVue
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.
Validación Final
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.
Commit Final
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