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
Función externa
Veamos cómo definir y usar una función externa a nuestros componentes de Vue.
Evitando la Repetición de Código en "beforeRouteEnter" y "beforeRouterUpdate"
Aunque nuestro filtro ya funcione, probablemente te estés preguntando cómo evitar la repetición de código en beforeRouteEnter y beforeRouterUpdate.
En este caso, estamos repitiendo solo tres líneas.
Sin embargo, en otros casos podrías tener una lógica más compleja.
¿Cómo corregimos esta repetición de código?
Probablemente estés pensando en definir un método.
Pero, como hemos visto, esto no es recomendable aquí, porque beforeRouteEnter no tiene acceso a this.
Esto sucede porque el componente todavía no se ha creado.
Entonces, no podríamos usar this para acceder a los métodos.
Usando funciones externas al componente
Recuerda que, a final de cuentas, seguimos usando JavaScript.
Estamos trabajando con Vue, pero todo el script nos permite ejecutar código JavaScript.
Por lo tanto, podemos dejar nuestro export default representando nuestro componente de Vue, pero definir funciones externas al componente.
Por ejemplo, podemos definir una función updateCategoryFromRouteParams.
Esta función actualizará la categoría a partir de los parámetros de ruta.
Colocamos dentro de ella las líneas de código necesarias.
La función recibirá categoryId en formato de cadena, ya que así es como se recibe en los parámetros de ruta.
Implementación de la función
Nuestro código se transformaría en un llamado a esta función pasándole to.params.categoryId.
Aquí podemos definir un argumento categoryIdParam, que representará un parámetro de ruta en formato de cadena.
Luego, lo convertimos en number y lo pasamos al store.
De esta manera, tenemos un código en común que se invoca desde ambos lugares.
Manejo de parámetros de ruta como arreglos
Existe un detalle importante: los parámetros de ruta a veces son arreglos, no solo cadenas.
Por eso, en algunos editores o herramientas de análisis de código, esto podría resaltarse como un error.
Para solucionarlo, podemos hacer que la función acepte también un arreglo de cadenas.
En este caso, no habría problema, porque sabemos que no estamos trabajando con arreglos para el parámetro categoryId.
Más adelante, veremos cómo validar que el categoryId recibido como parámetro de ruta siempre sea válido.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
Aunque nuestro filtro ya funcione, probablemente te estés preguntando cómo puedo hacer para no repetir código en “beforeRouteEnter” y “beforeRouterUpdate”. En este caso estamos repitiendo sólo tres líneas. Pero en otros casos podrías tener una lógica más compleja. Entonces, ¿De qué manera podemos corregir esta repetición de código? Probablemente estés pensando en definir un método, pero como hemos visto, esto no es recomendable en este caso, porque "beforeRouterEnter" no tiene acceso a "this" porque el componente todavía no se ha creado. Entonces no podríamos usar "this" para acceder a los métodos. En ese caso, recuerda que a final de cuentas seguimos usando JavaScript. Estamos usando "vue", pero a final de cuentas toda esta sección de script nos permite ejecutar código JavaScript. Por lo tanto, nosotros podemos dejar nuestro export default aquí representando nuestro componente de "vue", pero aun así podemos definir funciones externas al componente. Por ejemplo, vamos a definir una función “updateCategoryFromRouteParams”, vamos a actualizar la categoría a partir de parámetros de ruta dentro de esta función, vamos a poner estas líneas y lo que esta función va a recibir es simplemente el “categoryId” en formato de cadena. Porque así es como se recibe en los parámetros de ruta. Entonces esto de aquí se convertiría en un llamado a esta función pasándole “to.params.categoryId”. Aquí podemos tener entonces un argumento “categoryIdParam” representando un parámetro de ruta que es una cadena. Luego nosotros lo convertimos en "number" y finalmente lo pasamos a nuestro "store". Entonces, el llamado a esta función puede ir de esta manera. Tenemos un código en común que se invoca desde estos dos lugares. Solo hay un detalle aquí. Los parámetros de ruta a veces son arreglos, no solo cadenas. Por eso es que aquí nos lo resalta de rojo. Lo que podemos hacer es aceptar aquí también un arreglo de cadenas. Y en realidad no hay problema, porque nosotros sabemos que no estamos trabajando con arreglos para el parámetro de “categoryId”. De todas formas, más adelante vamos a ver cómo validar para que el “categoryId” que se sirve como parámetro de ruta siempre sea válido.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
06
08
09
30
35
38
44
48
49
56
79
81
82
84
95
Función externa
99
107
112
119
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript