Примеси

Миксины - это гибкий способ распределения функций многократного использования для компонентов Vue. Объект mixin может содержать любые параметры компонента. Всякий раз, когда компонент использует миксин, все параметры в миксине будут «смешаны» с опциями компонента.

Пример как показано:

JS

// mixin object definition
```var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
// defining a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"

Вариант слияния

Всякий раз, когда миксин и компонент содержат перекрывающиеся опции, при использовании соответствующих стратегий они будут объединены.

Например, объекты данных могут подвергаться рекурсивному слиянию с данными компонентов и имеют приоритет в случае конфликтов.

JS

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      response: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { response: "goodbye", foo: "abc", bar: "def" }
  }
})

Хук-функции с одинаковыми именами объединяются в массив, так что все они будут вызваны. Все миксин-хуки будут вызываться перед собственными хуками компонента.

JS

var mixin = {
  created: function () {
    console.log('mixin hook called')
  }
}
new Vue({
  mixins: [mixin],
  created: function () {
    console.log('component hook called')
  }
})
// => "mixin hook is called"
// => "component hook is called"

Для опций, которые ожидают значения объекта, например методы, директивы и компоненты, они будут объединены в один и тот же объект. В этом случае параметры компонента будут иметь приоритет при наличии конфликтующих ключей в этих объектах:

JS

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}
var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

Обратите внимание, что те же стратегии слияния используются в Vue.extend ().

Глобал Миксин

Мы можем одинаково применять миксин во всем мире. Тем не менее, это следует использовать с осторожностью! Как только миксин будет применен глобально, он повлияет на каждый экземпляр Vue, который будет создан впоследствии. Когда это используется правильно, это может быть использовано для добавления логики обработки для пользовательских опций:

JS

Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
new Vue({
  myOption: 'hello!'
})
// => "hello!"

СОВЕТ: вы должны использовать глобальные миксины осторожно и редко, потому что это влияет на каждый создаваемый экземпляр Vue, включая сторонние компоненты. В большинстве случаев вы должны использовать его только для обработки пользовательских опций, как показано в примере выше. Хорошая идея - отправлять их как плагины, чтобы избежать дублирования приложений.

Стратегии объединения пользовательских опций

Когда мы объединяем пользовательские параметры, они используют стратегию по умолчанию, которая перезаписывает существующее значение. Однако, если мы хотим, чтобы пользовательский параметр был объединен с использованием пользовательской логики, нам нужно присоединить функцию к vue.config.optionMergeStrategies:

JS

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

Для опций, основанных на объектах, мы можем использовать ту же стратегию, что и методы:

JS

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

Стратегия слияния Vuex 1.x предоставляет более сложный пример:

JS

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)
  }
}