Mixins em 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.

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().