Релиз третьей версии фреймворка Vue предоставил разработчикам доработанный API для манипуляции состоянием приложения. Во Vue 3 были дополнены инструменты для реализации паттерна Dependency Injection. Использование этого паттерна вместе с доработанной системой реактивности позволяет разработчикам отказаться от использования VueX, MobX или любой другой библиотеки для управления стейтом приложения, и получить больший контроль над архитектурой приложения. Если все же решите отказаться от стейт менеджмента с помощью библиотек, то следует помнить, что

С большой силой приходит большая ответственность.

Появление provide и inject во Vue

Для инъекции зависимостей в компонентах Vue можно было использовать свойства provide и inject начиная ещё с версии 2.2.0. Но тогда они были частью объявления компонентов, и принцип их работы был интуитивно понятен: когда Vue находит в компоненте provide, то он ищет среди предков компонента нужные значение заданные свойством inject.

Переход на функциональную основу в третьей версии

Третья мажорная версия фреймворка расширила этот синтаксис и позволила использовать функции provide и inject для инъекции зависимостей. Особенность этих функций состоит в том, что они работают, как ожидается, только во время синхронного исполнения метода setup или синхронного исполнения методов жизненного цикла компонента. При этом соблюдается строгая иерархия зависимостей, т.е. у компонентов потомков есть доступ только к зависимостям от предков, а не все получают доступ к глобальным зависимостям. Проиллюстрировано на картинке выше.

// …
const injectFunction = () => inject('key2', 'value2');

export default defineComponent({
  setup() {
    inject('key', 'value'); // работает
    injectFunction(); // тоже работает
    setTimeout(injectFunction); // а это не работает
  },
  methods: {
    // вызов метода при браузерном событии (e.g. click) не сработает, а в методах жизненного цикла будет работать 
    injectFromMethod() {
      inject('key', 'value');
    },
  },
});

Как устроены inject и provide под капотом

Внутрненний принцип работы этих функций не является очевидным. По крайней мере, мне он не показался очевидным, поэтому я копался в исходниках, чтоб во всем разобраться. Можно было б предположить, что функции provide и inject могут как-то знать в каком контексте вызваны, но это невозможно. Единственный способ передавать контекст, в котором вызвана функция в js это ее аргументы или this, но мы не используем ни то, ни другое. На самом деле контекст и не передается. Нам и не нужно его передавать. Vue просто хранит данные компонента, обработка которого происходит в данный момент, в отдельной переменной уровня видимости модуля. Просто представьте следующий код:

// …
let currentInstance = null
function renderComponent(componentInstance) {
  currentInstance = componentInstance;
  componentInstance.setup();
  // do rest rendering logic
  // also set currentInstance to be componentInstance whenever lifecycle hook is called
}

export function provide(key, value) {
  if (!currentInstance.provides) {
	  currentInstance.provides = Object.create(currentInstance.parent.provides);
  }
  currentInstance.provides[key] = value;
}

export function inject(key) {
  return currentInstance.parent.provides[key];
}

Выше наведен очень утрированный пример, без обработки многих крайних случаев (нулевые значения, асинхронный setup, дебаг логи, и т.д.), но в целом он дает нам возможность понять, как Vue DI работает на самом деле. Для хранения информации о том какие данные обеспечены (provided) используется обычное прототипное наследование, а для того, чтоб инъецировать зависимость мы просто получаем её из свойства provides компонента, обработка которого происходит в данный момент.

Мне подход с изменением значения переменной компонента, который обрабатывается в данный момент, показался хрупким и не идиоматичным, но тем не менее на практике он показывает себя достаточно надежным. Все приложения, в которых я использовал provide и inject, работали стабильно и проблем не возникало.

Много ключевого функционала Vue опирается на возможность получить компонент, который обрабатывается в данный момент. Более того Vue предоставляет возможность  разработчикам самим получить этот компонент с помощью экспортированной функции getCurrentInstance.

Как это можно использовать?

Зависимости, предоставленные с помощью provide можно получить только в дочерних компонентах, но не в компоненте который их предоставляет.

// …
// такой код выведет предупреждения, а значение переменной value будет равно undefined
export default defineComponent({
  setup() {
    provide('key', 'value');
    const value = inject('key');
  },
});

Что если существует гипотетическая ситуация, в которой нам понадобилось получить их в компоненте, который их предоставил? Давайте напишем реализацию функции, которая сможет инъецировать зависимости, в том числе предоставленные компонентом, который обрабатывается в данный момент.

// …
// Такой код будет работать как нам нужно, т.е. значение переменной value будет получено
// из свойства provide данного компонента
export const injectFromCurrent = (key: string) => {
  const componentInstance = getCurrentInstance() as any;
  const componentProvides = componentInstance?.provides || {};
  if (!(key in componentProvides)) {
    console.warn(`injection ${key} not found.`);
    return undefined;
  }

  const dependency = componentProvides[key];
  return dependency;
};
// …
export default defineComponent({
  setup() {
    provide('key', 'value');
    const value = injectFromCurrent('key');
  },
});

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

Выводы

Vue предоставляет разработчикам обширный функционал для эффективной разработки приложений и уже обошёл React по количеству звёзд на Github, что свидетельствует, о его популярности среди разработчиков. Использование 3 версии ещё не так распространено, хотя последняя версия фреймворка предоставляет много интересного функционала. Знание об их внутреннем устройстве может быть полезно как при решении задач связанных непосредственно связанных с Vue, так и при похожих фич у себя в приложении, не использующем какой-либо фреймворк.