Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим глобальные миксины и пользовательские стратегии слияния для слияния миксинов в компоненты.

Глобальный миксин

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

Мы можем использовать это для внедрения пользовательской логики обработки, которая применяется ко всем компонентам.

Например, мы можем определить глобальный миксин следующим образом:

Vue.mixin({
  created() {
    const foo = this.$options.foo;
    console.log(foo);
  }
});
new Vue({
  el: "#app",
  foo: "foo"
});

Затем мы увидим foo в журнале, поскольку параметр foo извлекается из this.$options.foo в ловушке created.

Когда вызывается ловушка created, мы видим результат console.log с момента ее вызова.

В приведенном выше примере показано, как его следует использовать. Глобальные миксины следует использовать нечасто, поскольку мы хотим минимизировать вероятность ошибок, созданных конфликтами из глобальных миксинов.

Стратегии слияния настраиваемых параметров

Мы можем настроить стратегии для объединения кода миксина в компоненты.

Для этого мы назначаем функцию Vue.config.optionMergeStrategies.

Например, мы можем написать следующее:

Vue.config.optionMergeStrategies.myOption = (toVal, fromVal) => {
  return {
    ...toVal,
    ...fromVal
  };
};
Vue.mixin({
  myOption: { foo: 1 }
});
const vm = Vue.extend({
  myOption: { foo: 2 }
});
console.dir(vm.options.myOption);

Мы видим, что toVal - это { foo: 1 } из миксина, а fromVal - это { foo: 2 } из компонента, который мы создали с помощью Vue.extend.

Поэтому мы объединили myOption из миксина в компонент, предоставив myOption компоненту приоритет.

Это означает, что vm.options.myOption имеет значение { foo: 2 }.

Мы можем написать то же самое с new Vue следующим образом:

Vue.config.optionMergeStrategies.myOption = (toVal, fromVal) => {
  return {
    ...toVal,
    ...fromVal
  };
};
const mixin = {
  myOption: { foo: 1 }
};
const vm = new Vue({
  el: "#app",
  myOption: { foo: 2 },
  mixins: [mixin]
});
console.dir(vm.$options.myOption);

Мы видим, что vm.options.myOption снова имеет значение { foo: 2 }.

Мы также можем перевернуть их, что означает, что параметр миксина имеет приоритет над параметром компонента, если они имеют одинаковое имя, написав:

Vue.config.optionMergeStrategies.myOption = (toVal, fromVal) => {
  return {
    ...fromVal,
    ...toVal
  };
};
const mixin = {
  myOption: { foo: 1 }
};
const vm = new Vue({
  el: "#app",
  myOption: { foo: 2 },
  mixins: [mixin]
});
console.dir(vm.$options.myOption);

Затем мы получаем { foo: 1 } из console.log, что означает, что mixin myOption имеет приоритет над myOption компонента.

Мы можем получить различные стратегии для вариантов слияния, используя Vue.config.optionMergeStrategies.

Существуют стратегии для общих элементов опций, таких как методы перехвата жизненного цикла, watch, computed, methods, directives и т. Д.

Практически все параметры, которые мы можем поместить во Vue, но не наши собственные, находятся в объекте Vue.config.optionMergeStrategies.

Мы можем использовать эти предустановленные стратегии, чтобы установить стратегии слияния для наших собственных опций.

Например, если нам нужна methods стратегия слияния myOption, мы можем написать следующее:

const strategies = Vue.config.optionMergeStrategies;
strategies.myOption = strategies.methods;

Тогда стратегия слияния для слияния myOption будет такой же, как и стратегия, которую мы используем для методов, то есть методы компонента имеют приоритет над методами миксина, если они имеют то же имя.

Заключение

Мы можем определить глобальный миксин, чтобы объединить опцию из миксина со всеми компонентами.

Это не следует использовать часто, поскольку это создает конфликты, которые трудно отследить.

Его следует использовать только для наших собственных настраиваемых параметров.

Мы также можем создать нашу собственную стратегию слияния миксинов, добавив свойство к Vue.config.optionMergeStrategies.optionName и установив функцию, которая принимает объекты параметров из миксина и компонента соответственно и возвращает объединенный объект.

Наконец, мы можем получить доступ к полному списку стратегий с помощью объекта Vue.config.optionMergeStrategies.

Примечание от JavaScript In Plain English: Мы всегда заинтересованы в содействии продвижению качественного контента. Если у вас есть статья, которую вы хотите отправить в JavaScript In Plain English, отправьте нам электронное письмо по адресу [email protected] с вашим именем пользователя Medium, и мы добавим вас в качестве автора.