Introdu��o ao Mixin no Vue.js

Mixin � basicamente um pedaço de c�digo em forma de objeto, que podemos utilizar em qualquer componente da nossa aplicaç�o. Ele pode conter as mesmas funcionalidades de um componente, como data, methods e os gatilhos created e mounted.

Atrav�s do Mixin conseguimos reutilizar c�digos com diversos componentes. Quando importado por algum componente, todas as funcionalidades dele (data, methods e outros) se misturam, fazendo parte do componente que o importou como pode ser visto na Figura 1, da� vem o novo Mixin.

Figura 1. C�digo de um mixin sendo importado pelo componente

Principais vantagens de utilizar um Mixin

Um dos principais desafios de todos os programadores � escrever um c�digo limpo e reutiliz�vel, e uma das formas de se conseguir isso � n�o repetindo c�digo. � a� que entra o Mixin.

Al�m de poder reutilizar o c�digo (methods, created, data) como mencionado acima, os mixins tamb�m s�o muito flex�veis, pois quando importados por outros componentes podemos sobrescrev�-los sem causar erros de conflito. N�o se preocupe com este conceito de reescrever um mixin, pois ainda neste artigo veremos como isso � feito.

Outra vantagem de utilizar um mixin � que com ele conseguimos isolar a l�gica do seu componente e deix�-lo mais limpo.

Como criar um mixin?

O mixin possui uma sintaxe muito simples e semelhante a um componente Vue.js, como falado anteriormente. Ele � um objeto com as mesmas opç�es de um componente e que precisa ser exportado.

No C�digo 1 temos um exemplo simples de um mixin. Nele criamos uma propriedade chamada msg e um m�todo chamado showMsg.

const alertMixin = {
   data() {
     return {
       msg: 'Voc� clicou no bot�o'
     }
   },
   methods: {
     showMsg() {
       alert(this.msg);
     }
   }
  };
   
  export default alertMixin;

C�digo 1. Exemplo de c�digo de um mixin

Repare que no c�digo acima criamos um objeto que possui data e methods da mesma forma que um componente Vue.js.

O objetivo do mixin acima � exibir um alerta com o valor da propriedade msgquando o m�todo showMsg for chamado.

Para importar o mixin em um componente utilizamos a sintaxe do C�digo 2.

 
  import AlertMixin from '../mixins/AlertMixin'
   
  export default {
   name: 'TesteComponent',
   mixins: [AlertMixin],
   data() {
     return {}
   }
  }

C�digo 2. Componente importando o mixin

Entenda o c�digo criado:

Linha 1: O Mixin foi importado utilizando a sintaxe padr�o de importaç�o de uma vari�vel, funç�o ou componente.
Linha 5: S� importar o mixin n�o � o suficiente, precisamos registr�-lo na propriedade mixins de nosso componente. Observe que essa propriedade � um array, ent�o podemos registrar quantos mixins quisermos.

Um componente pode registrar mais de um mixin

Aplicando mixin em um projeto

Antes de seguir esta etapa � necess�rio ter um projeto Vue.js criado. Supondo que j� tenha um, mostraremos como o mixin que vimos anteriormente pode ser usado por nossos componentes.

O primeiro passo � criar um arquivo chamado AlertMixin.js, que pode ser salvo em qualquer pasta do projeto. Contudo, recomenda-se salvar em uma pasta chamada Mixins, para ficar mais organizado. O seu c�digo pode ser visualizado no C�digo 3.

const alertMixin = {
   data() {
     return {
       msg: 'Voc� clicou no bot�o'
     }
   },
   methods: {
     showMsg() {
       alert(this.msg);
     }
   }
  };
   
  export default alertMixin;

C�digo 3. C�digo do arquivo AlertMixin.js

Para poder importar este mixin em outros componentes � necess�rio export�-lo atrav�s de export default

Com o mixin criado o pr�ximo passo � criar um componente para import�-lo. Para isso crie um arquivo TesteComponent.vue na pasta componentes, como mostra o C�digo 4.

<template>
   <div>
     <button @click="showMsg">Button</button>
   </div>
  </template>
  <script>
  import AlertMixin from '../mixins/AlertMixin'
   
  export default {
   name: 'TesteComponent',
   mixins: [AlertMixin],
   data() {
     return {}
   }
  }
  </script>

C�digo 4. C�digo do componente TesteComponent

O componente TesteComponent, possui somente um button, que ao ser clicado, invoca um m�todo chamado showMsg. Repare que nosso componente TesteComponent n�o tem nenhum m�todo chamado showMsg, pois ele est� justamente dentro do nosso mixin, ent�o quando o importamos e registramos dentro da propriedade mixins, todas as propriedades do mixin se misturam com a do componente.

O �ltimo passo � importar o componente TesteComponent no arquivo App.vue, conforme vemos no C�digo 5.

  <template>
    <div id="app">
      <TesteCompoent />
    </div>
  </template>
   
  <script>
  import TesteComponent from './components/TesteComponent.vue'
   
  export default {
    name: 'App',
    components: {
      TesteComponent
    }
  }
  </script>
   
  <style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  </style>

C�digo 5. C�digo do arquivo App.vue importando o componente TesteComponent

Veja na Animaç�o 1 a tela do nosso projeto quando o bot�o foi clicado.

Animaç�o 1. Clicando no bot�o

Hierarquia das propriedades

Para entendermos a hierarquia quando usamos o mixin, criaremos uma propriedade no componente TesteComponent chamada msg, que � o mesmo nome de propriedade que existe no mixin.

Nesse casos o Vue.js vai dar prioridade �s propriedades do componente, ou seja, as propriedades do componente sempre v�o sobrepor as do mixin. Vamos definir uma outra mensagem na propriedade msg do componente TesteComponent, como mostra o C�digo 6.

  <template>
   <div>
     <button @click="showMsg">Button</button>
   </div>
  </template>
  <script>
  import AlertMixin from '../mixins/AlertMixin'
   
  export default {
   name: 'TesteComponent',
   mixins: [AlertMixin],
   data() {
     return {
       msg: 'Esta mensagem � do componente'
     }
   }
  }
  </script>

C�digo 6. Definindo a propriedade msg no componente TesteComponent

Repare que na linha 14 definimos a propriedade msg. Agora vamos ver na Animaç�o 2 o que aparece quando clicamos no bot�o novamente.

Animaç�o 2. Mensagem sendo exibida

Perceba que a mensagem impressa foi a da propriedade do nosso componente e n�o a do mixin.

Conclus�o

Os mixins s�o ferramentas simples e poderosas do Vue.js, que nos permite reutilizar c�digos e deixa os componentes mais limpos. Eles tamb�m s�o muito flex�veis, permitindo criar mixins para v�rias situaç�es. Cuidado para n�o abusar dos mixins em seus projetos, pois eles podem deixar algumas l�gicas dif�ceis de encontrar caso outro programador mexa no seu projeto.

Confira tamb�m

O que � Vue.js?

Curso

Sua primeira aplicaç�o

Curso

Apresentando o Node.js

V�deo

Mixin e Vue.js

Neste artigo falaremos sobre o Mixin, uma funcionalidade presente no Vue utilizada para melhorar nosso código, deixando-o reutilizável e nossos componentes mais limpos.