Mixins

Introdução

Mixins são uma forma flexível de distribuir funcionalidade reutilizável em diversos componentes Vue. Um objeto mixin pode conter quaisquer opções de componente. Quando um componente utiliza um mixin, todas as opções deste serão misturadas (em inglês, mixed in) com as opções do próprio componente.

Exemplo:

// define um objeto mixin
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('Bem-vindo ao mixin!')
}
}
}
// define um componente que usa esse mixin
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "Bem-vindo ao mixin!"

Mesclagem de Opções

Quando um mixin e o próprio componente contêm opções que se sobrepõem, eles serão mesclados usando estratégias apropriadas. Por exemplo, funções de gatilho com nome equivalente serão mescladas em um Array de modo que ambas as funções sejam executadas. As funções de gatilho declaradas no mixin serão executadas antes dos gatilhos declarados no próprio componente:

var mixin = {
created: function () {
console.log('gatilho do mixin')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('gatilho do componente')
}
})
// => "gatilho do mixin"
// => "gatilho do componente"

Opções que aceitam objetos, como methods, components e directives, serão mescladas em um único objeto. As opções do próprio componente terão prioridade, caso ocorra algum conflito nas chaves desses objetos:

var mixin = {
methods: {
foo: function () {
console.log('algo')
},
conflicting: function () {
console.log('escrito pelo mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('outra coisa')
},
conflicting: function () {
console.log('escrito pelo componente')
}
}
})
vm.foo() // => "algo"
vm.bar() // => "outra coisa"
vm.conflicting() // => "escrito pelo componente"

Observe que são as mesmas estratégias utilizadas em Vue.extend().

Mixin Global

Você também pode aplicar um mixin globalmente. Use com cautela! Assim que aplicar um mixin globalmente, isto irá afetar todas as instâncias Vue criadas depois. Quando utilizado apropriadamente, permite injetar lógica de processamento para opções customizadas:

// injeta um manipulador para a opção customizada `myOption`
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'beleza!'
})
// => "beleza!"

Utilize mixins globais raramente e cuidadosamente, porque eles afetam cada uma das instâncias Vue criadas, incluindo os componentes de terceiros. Na maioria dos casos, você deveria utilizá-los somente para tratar opções customizadas, como demonstrado no exemplo acima. É também uma boa ideia disponibilizá-los como Plugins, para evitar uso duplicado.

Estratégias de Mesclagem de Opções Customizadas

Quando opções customizadas são mescladas, elas usam a estratégia padrão, que simplesmente sobrepõe o valor existente. Se você quiser que uma opção seja mesclada usando uma lógica customizada, você precisa vincular uma função em Vue.config.optionMergeStrategies:

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal
}

Para a maioria das opções baseadas em objetos, você pode simplesmente utilizar a mesma estratégia usada por methods:

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods

Um exemplo mais avançado pode ser encontrado nesta estratégia de mesclagem do Vuex 1.x:

const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
if (!toVal) return fromVal
if (!fromVal) return toVal
return {
getters: merge(toVal.getters, fromVal.getters),
state: merge(toVal.state, fromVal.state),
actions: merge(toVal.actions, fromVal.actions)
}
}