Si estas haciendo aplicaciones con Vue.js es probablemente que estés usando los mixins para reutilizar el código. En algunos casos, existe la posibilidad de que tengas dos o más mixins con los mismos nombres de métodos pero implementando las funcionalidades de forma distinta. Pero solo necesites importar/inyectar uno solo en la vista actual. Entonces es necesario cargar dinámicamente mixins distintos desde el router dependiendo de la ruta.
Cómo cargar dinámicamente mixins distintos
En mi caso dependiendo de la ruta, necesitaba cargar código específico. Esto es para poder reciclar la vista, el cual llama a métodos con los mismos nombres en los distintos mixin. Como Vue.js 2 no soporta importar objectos de form dinámica, no podemos hacer los imports mediante una condición inicial. Así que la forma que encontré es pasando un nuevo componente que sea hijo (para heredar los atributos y métodos) de tu mixin. Defines en cada ruta, este nuevo componente y defines que herede el mixin correspondiente.
La solución a cargar dinámicamente mixins distintos es que Vue router permite en la sección de component pasar el componente que reutilizas (en mi caso el de la vista) y luego pasar en el atributo mixins, un arreglo con el mixin que debe usar esa vista.
A continuación puedes ver a qué me refiero:
{
path: "/rutaA",
name: "ComponenteA",
component: {
extends: ComponenteComun,
mixins: [mixinA]
}
},
{
path: "/rutaB",
name: "ComponenteB",
component: {
extends: ComponenteComun,
mixins: [mixinB]
}
},Con esto, cuando se entra a una ruta el router creará un nuevo componente con los métodos, atributos y observadores del componente a reusar. Pero como se está definiendo un mixin distinto a cada vista tendrán implementaciones distintas.
Espero que está guía te haya servido en tu proyecto informático. Si te gustó puedes compartirla o si deseas aportar algo a esta entrada, simplemente deja un comentario.
¡Gracias por leerla!
Deja un comentario
