Миксины в VueJS

Короткая заметка и миксинах в VueJs

Когда ваш проект на Vue начинает расти, возможно вам приходилось копипастить одни и те же данные, методы и ватчеры снова и снова в разных компонентах проекта. Безусловно можно выделить эти данные в отдельные компоненты и передавать данные между ними через props. Но использование большого количества props очень быстро сделать ваш проект более запутанным и загроможденным.

К счастью в VueJS есть такое понятие как Mixins  —  наиболее простой способ обмена повторно используемого кода между компонентами. Объекты Mixin могут содержать в себе все опции обычных компонентов  —  data, mounted, created, update, и т. д.  Данные миксинов и используемых их компонентов легко доступны друг для друга. Это станет более очевидно после просмотра следующего примера.

// mixin.js file

export default {
   data () {
      msg: ‘Hello World’
   },
   created: function () {
      console.log(‘Printing from the Mixin’)
   },
   methods: {
      displayMessage: function () {
         console.log(‘Now printing from a mixin function’)
      }
   }
}

// main.js file

import mixin from ‘./mixin.js’
new Vue({
   mixins: [mixin],
   created: function () {
      console.log(this.$data)
      this.displayMessage()
   }
})
// => "Printing from the Mixin"
// => {msg: ‘Hello World’}
// => "Now printing from a mixin function"

Как вы можете ваидеть, после задействования mixin, компонент содержит все данные прописанные в mixin, и они легко доступны через this. Вы также можете определить миксин, используя переменную вместо отдельного файла. Честно говоря, это большая часть того, что вам нужно знать о миксинах.

Что случится в случае конфликта имен переменных?

Конфликт имен между компонентов и миксином может случится когда будут использованы одниковые именна переменных или методов в миксине и компоненте. В этом случае свойства компонента переопределять соотвествующие свойства миксина Для примера в случае использование переменной title в data и в миксине и в компоненте  — this.title вернет значение компонента. Пример:

mixin.js file

export default {
   data () {
      title: ‘Mixin’
   }
}

main.js file

import mixin from ‘./mixin.js’
export default {
   mixins: [mixin],
   data () {
      title: ‘Component’
   },
   created: function () {
      console.log(this.title)
   }
}

// => "Component"

В заключение

Как и во всем, во VueJS всегда есть что-то, чему можно научиться. И эта статья была лишь ознакомительная заметка о использование миксинов. Если вы хотите узнать о более сложных моментах, таких как глобальные миксины и т.п., эта информация доступна в документации по миксинам.

Оригинал: How to Manage Mixins in VueJS