Como usar Mixins no VueJS

Matt Maribojoc Blocked Unblock Seguir Seguindo 8 de janeiro

Quando seu projeto do Vue começar a crescer, você poderá copiar e colar os mesmos dados, métodos e observadores repetidamente se tiver componentes semelhantes. Claro – você poderia escrever todos esses arquivos separados como um único componente e usar adereços para tentar personalizá-los, mas usar esses adereços pode facilmente tornar-se confuso e confuso. Para evitar essa tarefa assustadora, a maioria das pessoas continua adicionando código duplicado, apesar da sensação de que existe uma solução melhor.

Felizmente, os deuses VueJS nos abençoaram com Mixins – uma das maneiras mais fáceis de compartilhar código reutilizável entre diferentes componentes. Os objetos Mixin podem usar qualquer uma das opções do componente – dados, montados, criados, atualizados, etc – e quando um componente usa um mixin, todas as informações no objeto mixin serão, bem, misturadas ao componente. O componente terá acesso a todas as opções no mixin como se fosse declarado no próprio componente. Isso fará muito mais sentido depois de um exemplo.

 // arquivo mixin.js 
 exportar padrão { 
 data () { 
 msg: 'Olá mundo' 
 } 
 criado: function () { 
 console.log ('Imprimindo a partir do Mixin') 
 } 
 métodos: { 
 displayMessage: function () { 
 console.log ('Agora imprimindo de uma função mixin') 
 } 
 } 
 } 

 // ------------------------------------------------ ----------- 

 // main.js file 
 import mixin de './mixin.js' 
 novo Vue ({ 
 mixins: [mixin], 
 criado: function () { 
 console.log (isso. $ data) 
 this.displayMessage () 
 } 
 }) 
 // => "Imprimindo a partir do Mixin" 
 // => {msg: 'Hello World'} 
 // => "Agora imprimindo de uma função mixin" 

Como você pode ver, depois de usar o mixin, o componente contém todos os dados no mixin, e é acessado usando this . Você também pode definir o mixin usando uma variável em vez de um arquivo separado. Honestamente, é mais do que você precisa saber sobre mixins, mas acho que é útil saber mais sobre certos casos de uso e casos específicos.

O que acontece se houver um conflito de nomes?

Um conflito de nomes entre um componente e sua mixagem pode acontecer quando há dados, métodos ou qualquer opção de componente no mixin que tenha o mesmo nome de uma opção no componente. Se isso ocorrer, a propriedade no próprio componente terá precedência. Por exemplo, se houver uma variável de dados de title no componente e no this.titlethis.title retornará o valor definido no componente. No código, isso parece:

 // arquivo mixin.js 
 exportar padrão { 
 data () { 
 título: 'Mixin' 
 } 
 } 

 // ------------------------------------------------ ----------- 
 
// main.js file
 import mixin de './mixin.js' 
 exportar padrão { 
 mixins: [mixin], 
 data () { 
 título: 'Componente' 
 } 
 criado: function () { 
 console.log (this.title) 
 } 
 } 
 // => "Componente" 

Você está feito! Bem, bem … por agora.

Como em tudo, há sempre mais no VueJS Mixins que você pode aprender, mas isso deve ser suficiente para você começar e cobrir a maioria dos casos de uso. Se você deseja aprender sobre tópicos mais avançados, como mixins globais e configurações de mesclagem personalizadas no Vue, essas informações estão disponíveis em sua documentação para o Mixins . Adoro a documentação do Vue, acho super bem escrito e fácil de entender.

Feliz mistura!