Mixins no Vue.js

Mixins permitem reutilizar funcionalidade entre componentes, de forma semelhante à herança. Um mixin pode conter propriedades, métodos e outras opções do Vue. Quando um componente usa um mixin, seus métodos e propriedades são incorporados ao componente.

Exemplo de Componentes Sem Mixins

Considere o exemplo a seguir com dois componentes:

<!DOCTYPE html>
<html>
  <head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <light></light>
      <enabled></enabled>
    </div>
    <script>
      const app = Vue.createApp({});

      app.component("light", {
        template: `<div>
                        <h3>{{header}}</h3>
                        <button v-on:click="toggle" v-show="state">{{on}}</button>
                        <button v-on:click="toggle" v-show="!state">{{off}}</button>
                        </div>`,
        data() {
          return { state: true, on: "ON", off: "OFF" };
        },
        methods: {
          toggle() {
            this.state = !this.state;
          },
        },
        computed: {
          header() {
            return this.state ? "Luz ligada" : "Luz desligada";
          },
        },
      });

      app.component("enabled", {
        template: `<div>
                        Estado: {{ state ? "acesso liberado" : "acesso bloqueado" }}
                        <button v-on:click="toggle" v-show="state">{{on}}</button>
                        <button v-on:click="toggle" v-show="!state">{{off}}</button>
                        </div>`,
        data() {
          return { state: true, on: "ON", off: "OFF" };
        },
        methods: {
          toggle() {
            this.state = !this.state;
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>

Os dois componentes possuem funcionalidade semelhante, e esse código pode ser extraído para um mixin.

Exemplo de Componentes Sem Mixins em Vue.js

Refatoração com Mixins

Para refatorar o código acima, podemos criar um mixin que contém a lógica compartilhada entre os componentes.

<div id="app">
  <light></light>
  <enabled></enabled>
</div>
<script>
  const toggleMixin = {
    data() {
      return { state: true, on: "ON", off: "OFF" };
    },
    methods: {
      toggle() {
        this.state = !this.state;
      },
    },
  };

  const app = Vue.createApp({});

  app.component("light", {
    template: `<div>
                    <h3>{{header}}</h3>
                    <button v-on:click="toggle" v-show="state">{{on}}</button>
                    <button v-on:click="toggle" v-show="!state">{{off}}</button>
                   </div>`,
    mixins: [toggleMixin],
    computed: {
      header() {
        return this.state ? "Luz ligada" : "Luz desligada";
      },
    },
  });

  app.component("enabled", {
    template: `<div>
                    Estado: {{ state ? "acesso liberado" : "acesso bloqueado" }}
                    <button v-on:click="toggle" v-show="state">{{on}}</button>
                    <button v-on:click="toggle" v-show="!state">{{off}}</button>
                   </div>`,
    mixins: [toggleMixin],
  });

  app.mount("#app");
</script>

O mixin toggleMixin agrupa o estado e o método toggle(), que agora podem ser compartilhados por múltiplos componentes. O parâmetro mixins recebe um array, permitindo que um componente utilize vários mixins. A funcionalidade do mixin é mesclada com a lógica do componente, resultando no mesmo comportamento do exemplo anterior.

⚠️ Se um mixin e um componente definirem propriedades ou métodos com o mesmo nome, a implementação do componente terá prioridade e substituirá a do mixin.

Mixins Globais

No Vue.js, mixins podem ser definidos globalmente e aplicados a todos os componentes da aplicação. O método mixin() do objeto da aplicação permite essa definição:

<!DOCTYPE html>
<html>
  <head>
    <title>Componentes Vue.js</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <message></message>
    </div>
    <script>
      const app = Vue.createApp({});

      app.component("message", {
        template: `<h2>Hello</h2>`,
      });

      app.mixin({
        created() {
          console.log("Mixin global foi criado");
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>

Neste caso, um mixin global é definido e o hook created() exibe uma mensagem no console do navegador. Como o mixin global se aplica a todos os componentes e à própria instância da aplicação Vue, ele será executado duas vezes: uma para o componente message e outra para a instância da aplicação.

Mixins Globais em Vue.js

Resumo

Mixins permitem compartilhar lógica entre componentes no Vue.
Um mixin pode conter data(), methods, computed e outros recursos do Vue.
O mixin é adicionado ao componente usando mixins: [mixinName].
Se um mixin e um componente tiverem métodos ou propriedades com o mesmo nome, o do componente tem prioridade.
Mixins globais podem ser aplicados a todos os componentes da aplicação com app.mixin().

Documentação oficial:

Mixins