Un vistazo a los mixins de Vue

Uno de los problemas que te puedes plantear al desarrollar aplicaciones web con Vue es cuando tienes dos componentes que son prácticamente iguales (funcionalidad parecida) pero no puedes fusionarlos en uno solo con props porque resultaría demasiado complejo.

Es decir, muchas veces tienes un determinado método, propiedad computada o lo que sea que tienes que repetir en muchos componentes porque no puedes crear un solo componente genérico que te sirva para todoas los casos.

Los mixins sirven para solventar esta situación. Se trata de una funcionalidad de Vue que permite reutilizar cualquier cosa de los componentes para que no tengas que duplicar funcionalidad o no acabes con demasiados componente con demasiados props.

Pero no todo es bonito. Una pega de los mixins es que tienes que tener mucho cuidado con ellos, puedes perder fácilmente el control de lo que se inserta en el componente al usar el mixin.

Imagina que estás trabajando en una web muy compleja hecha con Vue y estás con varios compañeros, si no tienes cuidado puede que te importes un mixin y se inserte dentro del componente cierta lógica que no quieres. Siempre mira lo que contiene el mixin para evitar efectos inexperados.

Cómo se crea un mixin

Para los mixins, lo que suelo hacer es crear una carpeta llamada mixins dentro de la carpeta src del proyecto.

Un mixin simple sería algo tal que así:

// src/mixins/clickMixin.js

export default {
  methods: {
    clickHandler(value) {
      console.logvalue);
    }
  }
};

Para crear el mixin lo único que tienes que hacer es un export default de un objeto. Dentro de este objeto puedes escribir el mismo código que pondrías dentro de la lógica del componente.

Otro ejemplo de mixin:

// src/mixins/anotherMixin.js

export default {
  data: () => ({
    myVariable: 10,
  }),
  created() {
    console.log(myVariable++);
  },
};

Como ves puedes incluso usar el ciclo de vida de Vue que ya conoces, puedes declarar variables, crear computadas, watchers, en definitiva, todo lo que iría dentro de los componentes (dentro del export default).

Cómo se usan los mixins

Una vez creados los mixins, usarlos es muy sencillo. Dentro del componente en el que quieras esa lógica del mixin lo primero que tienes que hacer es importar el mixin y declararlo dentro de la sección mixins del componente

<script>
  import clickMixin from "@/mixins/clickMixin";

  export default {
    name: "Test",
    mixins: [clickMixin],
  };
</script>

Y listo, no tiene más. El contenido del mixin se "copiará" dentro de este componente. Eso quiere decir que en este componente no tienes que declarar el método clickHandler porque ya viene desde el mixin.

Esa es la pega de los mixins, sobre todo si los usas desde una librería o creados por otra persona, tienes que saber muy bien el contenido del mixin para que no haya conflicto con las cosas que tienes declaradas en el componente.

Lo bueno es que Vue lo que primero aplica es el mixin y a continuación aplica el propio componente, esto quiere decir que un método con el mismo nombre en el mixin y en el componente que usa ese mixin el que se usará finalmente es el del componente.

Mixins globales

Otra cosa que puedes hacer con los mixins es crearlos para que se autoimporten en todos los componentes. Esto rara vez lo vas a necesitar (yo todavía no lo he necesitado nunca) pero por si lo necesitas aquí te explico como crearlos de forma global.

Para hacerlo lo único que tienes que hacer es declararlos dentro del archivo main.js, eso es todo.

// /src/main.js

Vue.mixin({
  created() {
    console.log("hello world!");
  },
});

Si crear mixins de forma local (los que hemos visto antes) ya era un poco peligroso porque podías insertar en el componente código de forma descontrolada, en los componetes globales es aún más peligroso porque se va a aplicar en todos los componentes.

Si en un mixin global tienes algo que falla, van a fallar todos los componentes de tu aplicación web, ten mucho cuidado.

Conclusiones

Yo personalmente los mixins no los uso demasiado. Intento crear componentes reutilizables y solo los uso cuando se complica demasiado el código.

Si vas a usarlos te recomiendo que intentes crearlos de forma local a los componentes (teniendolos que importar) y que solo uses los mixins globales en casos extremos en los que no tengas más remedio que usarlos.