Что такое Mixins?

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

Создание простого миксина

// loggerMixin.js
export const loggerMixin = {
  data() {
    return {
      message: 'Hello from mixin!'
    }
  },
  created() {
    console.log('Mixin hook called')
  },
  methods: {
    logMessage() {
      console.log(this.message)
    }
  }
}

Использование миксина в компоненте

import { loggerMixin } from './loggerMixin'

export default {
  name: 'MyComponent',
  mixins: [loggerMixin],
  created() {
    this.logMessage() // Выведет "Hello from mixin!"
    console.log('Component hook called')
  }
}

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

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

// main.js
const globalMixin = {
  mounted() {
    console.log('Component mounted: ' + this.$options.name)
  }
}

Vue.mixin(globalMixin)

Стратегии слияния миксинов

При конфликте опций миксина и компонента применяются следующие правила:

Хуки жизненного цикла: Объединяются в массив, сначала вызываются миксины, затем компонент

// mixin
const mixin = {
  created() {
    console.log('mixin created')
  }
}

// component
export default {
  mixins: [mixin],
  created() {
    console.log('component created')
  }
}
// Вывод:
// "mixin created"
// "component created"

Объекты: Рекурсивно объединяются, при конфликтах приоритет у компонента

const mixin = {
  methods: {
    foo() {
      console.log('mixin foo')
    },
    shared() {
      console.log('mixin shared')
    }
  }
}

export default {
  mixins: [mixin],
  methods: {
    bar() {
      console.log('component bar')
    },
    shared() {
      console.log('component shared')
    }
  }
}
// shared() вызовет "component shared"

Создание плагинов

Плагины во Vue.js используются для добавления глобальной функциональности

Простой плагин

// plugins/myPlugin.js
export default {
  install(Vue, options) {
    // 1. Добавление глобального метода или свойства
    Vue.myGlobalMethod = function () {
      // логика метода
    }

    // 2. Добавление глобальной директивы
    Vue.directive('my-directive', {
      bind(el, binding, vnode) {
        // логика директивы
      }
    })

    // 3. Добавление опций компонента
    Vue.mixin({
      created() {
        // логика при создании
      }
    })

    // 4. Добавление метода экземпляра
    Vue.prototype.$myMethod = function (options) {
      // логика метода
    }
  }
}

Использование плагина

// main.js
import MyPlugin from './plugins/myPlugin'

Vue.use(MyPlugin, { option: true })

Пример практического плагина для работы с toast-уведомлениями

// plugins/toast.js
const ToastPlugin = {
  install(Vue, options = {}) {
    // Создаем компонент для уведомлений
    const ToastComponent = Vue.extend({
      template: `
        <div class="toast" v-if="visible">
          {{ message }}
        </div>
      `,
      data() {
        return {
          visible: false,
          message: '',
          timeout: null
        }
      },
      methods: {
        show(message, duration = 3000) {
          this.message = message
          this.visible = true

          if (this.timeout) {
            clearTimeout(this.timeout)
          }

          this.timeout = setTimeout(() => {
            this.visible = false
          }, duration)
        }
      }
    })

    // Создаем экземпляр компонента
    const toast = new ToastComponent().$mount()
    document.body.appendChild(toast.$el)

    // Добавляем метод в прототип Vue
    Vue.prototype.$toast = {
      show(message, duration) {
        toast.show(message, duration)
      }
    }
  }
}

export default ToastPlugin

Стили для toast-уведомлений

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 20px;
  background: #333;
  color: white;
  border-radius: 4px;
  z-index: 9999;
}

Использование toast-плагина

// Регистрация плагина
import ToastPlugin from './plugins/toast'
Vue.use(ToastPlugin)

// Использование в компоненте
export default {
  methods: {
    showNotification() {
      this.$toast.show('Операция успешно выполнена!')
    }
  }
}

Публикация плагина

Создайте package.json:

{
  "name": "vue-my-plugin",
  "version": "1.0.0",
  "description": "My Vue.js Plugin",
  "main": "dist/vue-my-plugin.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "keywords": ["vue", "plugin"],
  "author": "Your Name",
  "license": "MIT"
}

Настройте webpack для сборки:

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'vue-my-plugin.js',
    library: 'VueMyPlugin',
    libraryTarget: 'umd'
  }
}

Опубликуйте в npm:

npm login
npm publish

Советы от меня:

Используйте миксины для повторного использования кода, но избегайте излишней сложности
Документируйте поведение миксинов и плагинов
Следите за конфликтами имен в миксинах
Тестируйте плагины перед публикацией
Используйте семантическое версионирование для плагинов