Como compartilhar e reutilizar código entre componentes com Mixins

Mixins no Vue.js são uma maneira de compartilhar e reutilizar código entre componentes. Eles são como blocos de código que podem ser "misturados" em diferentes componentes para adicionar funcionalidades específicas.

Por exemplo, imagine que você está construindo um aplicativo Vue.js e tem vários componentes que precisam executar a mesma lógica ou ter métodos comuns. Em vez de copiar e colar o mesmo código em todos esses componentes, você pode criar um mixin que contenha esse código e, em seguida, aplicá-lo a esses componentes.

Aqui está um exemplo prático:

Suponha que você tenha um mixin chamado validacaoFormulario que contém métodos para validar formulários. Esse mixin pode ser definido da seguinte forma:

const validacaoFormulario = {
methods: {
  validarCampo(campo) {
    // Coloque aqui a lógica de validação do campo
  },
  enviarFormulario() {
    // Coloque aqui a lógica para enviar o formulário
  }
}
};

Agora, você pode aplicar esse mixin a qualquer componente que precise de validação de formulário:

Vue.component('FormularioUsuario', {
mixins: [validacaoFormulario], // Aplicando o mixin aqui


methods: {
  handleSubmit() {
    if (this.validarCampo('nome') && this.validarCampo('email')) {
      this.enviarFormulario();
    }
  }
},

// Resto do código do componente...
});

Neste exemplo, o mixin validacaoFormulario é aplicado ao componente FormularioUsuario. Isso permite que o componente utilize os métodos validarCampo e enviarFormulario do mixin sem ter que escrever esse código novamente.

Em resumo, mixins no Vue.js são uma maneira eficiente de reutilizar código em vários componentes, tornando seu código mais limpo, organizado e facilitando a manutenção. Eles permitem compartilhar funcionalidades comuns entre componentes de forma eficaz.

Referências:

https://vuejs.org/api/options-composition.html#mixins

https://cursos.alura.com.br/course/vue3-avancando-framework/task/98170