Vue Injector

# Начало работы

Зависимости

ECMAScript stage 1 decorators. Если вы используете Babel, необходим @babel/plugin-proposal-decorators. Если вы используете TypeScript, включите флаги --experimentalDecorators и --emitDecoratorMetadata.

Vue-injector requires a modern JavaScript engine with support for:

If your environment doesn't support one of these you will need to import a shim or polyfill .

Required

The reflect polyfill should be imported only once in your entire application because the Reflect object is meant to be a global singleton.

Кроме того, все примеры будут использовать полную сборку Vue, чтобы позволить компиляцию шаблонов на лету. Подробнее о различиях сборок читайте здесь. :::

Использовать DI при помощи Vue Injector очень просто. Пример:

# HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@scandltd/vue-injector/dist/vue-injector.js"></script>

<div id="app">
  <h1>Первое приложение!</h1>
  <p>
    <!-- отображаем тут зарегистрированный компонент-->
    <logger/>
  </p>
</div>

# JavaScript

// 0. Если используем модульную систему (например через vue-cli), 
// импортируем Vue и VueInjector и затем вызываем `Vue.use(VueInjector)`.

// 1. Создаём экземпляр инжектора
// new VueInjector({ store, root: [Service] })
const injector = new VueInjector()

// 2. Создаём и монтируем корневой экземпляр приложения.
// Убедитесь, что передали экземпляр плагина в опции
// `injector`, чтобы позволить приложению знать о его наличии.
const app = new Vue({
  injector
}).$mount('#app')

// Всё, приложение работает! ;)

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

import { Injectable, Inject } from '@scandltd/vue-injector'

// Регистрируем новый сервис
@Injectable
class LogService extends Inject {}

<template>
    // Выведим имя нашего сервиса
    {{ LogService.name }}
</template>

import LogService from 'logger'

// Внедряем зависимость в компонент.
Vue.component('logger', {
  name: 'logger',
  providers: {
    LogService
  }
})

Внедряя инжектор, мы сможем получить к нему доступ через this.$injector, а также к внедренным сервисам this.<ServiceName> внутри любого компонента:

// Home.vue
export default {
  computed: {
    logger () {
      // Мы скоро разберём, что такое `get`
      return this.$injector.get(LogService)
    }
  }
}

В документации мы будем часто использовать экземпляр injector. Имейте ввиду, что this.$injector в точности то же самое, что и injector.

← Регистрация сервиса →