Знакомство с примесями mixins во Vue

Знакомство с mixins

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

Во Vue таким инструментом, который позволяет нам переиспользовать какой-то код в разных компонентах, чтобы не писать его каждый раз снова и снова, для решения этой задачи существует такой инструмент, как миксины (mixins).

mixins - переводится, как "примеси". По сути, миксины, как бы встраиваются в наш компонент и расширяют его. Поэтому они и называются "примесями".

Если у нас есть какой-то компонент, мы можем его расширить с помощью сущности миксинов. 

Если вам приходилось наследовать классы друг от друга в программировании, то здесь примерно что-то такое же. Есть родительский класс (компонент) и есть дочерний класс (mixin) и он дополняет родительский компонент. 

Vue mixins на примере

Как правило, для миксинов создают отдельную папку в директории src проекта. Называться она может mixins и в ней будут храниться файлы миксинов, которые представляют собой файлы с расширением *.js.

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

Пример содержимого файла с миксином.

export default {

  data() {

    return {

      from_mixin: '333'

    }

  }

}

В этом файле происходит экспорт Javascript объекта со свойствами, которые будут расширять родительский компонент.

В этом объекте мы можем расширять data, methods, computed и др. Все свойства родительского компонента.

В примере выше, мы расширяем наш уровень данных. Т.е. к ключам, которые находятся на уровне данных в родительском компоненте, будет добавлен еще один дополнительный ключ from_mixin со значением '333'.

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

Для того, чтобы этот миксин смешать с нашим компонентом мы должны сначала его импортировать.

import test_mixin from "@/mixins/test_mixin";

Для того, чтобы он теперь смешался с нашим компонентом, есть такое свойство mixins у компонентов, где мы можем указать массив миксинов, которые будут в нашем компоненте.

<script>

import test_mixin from "@/mixins/test_mixin";

export default {

  name: "TestComponent.vue",

  mixins: [test_mixin],

  data() {

    return {

      select: 'Выбор 1'

}

  },

  created() {

  },

  methods: {},

  computed: {}

}

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

Если вы теперь посмотрите на уровень данных компонента TestComponent, то там можно увидеть добавленный из миксина ключ from_mixin.

Пример расширения methods с помощью mixins

Давайте рассмотрим еще пример как с помощь примесей добавить дополнительный метод к компоненту. 

Например, в нашем миксине мы можем добавить дополнительный метод:

export default {

  data() {

    return {

      from_mixin: '333'

    }

  },

  methods: {

    plus_one() {

      this.test = this.test + 1;

    }

  }

}

В родительском компоненте я могу создать кнопку

<button @click="plus_one()">Увеличить на 1</button>

И на уровне данных создать

data() {

    return {

      test: 1

    }

}

Сам метод plus_one находится в миксине, а не родительском компоненте.

Таким же образом можно расширять created и другие какие-то методы. 

Это основы работы с миксинами: вы пишите один какой-то миксин и затем можете импортировать его в разные компоненты расширяя их. Удобно и экономит много времени.