Función externa

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.

Crea una cuenta y continúa aprendiendo 🚀

Función externa