Шаблон контекстного API

До сих пор шаблоны, представленные в предыдущей серии, касались «передачи данных» между компонентами в многоуровневой иерархии. Может ли родительский компонент напрямую «предоставлять» данные, а любой компонент-потомок просто «потреблять» их? У React.js есть контекстный API для этого, а как насчет Vue.js? Ответ: у Vue.js есть набор подобных API.

Шаблон контекстного API

Мы начнем с той же иерархии компонентов, что и раньше, где есть четыре вложенных компонента:

App --> Parent --> ChildA --> GrandchildA

Вот начальное состояние компонентов:

App имеет набор данных о десертах.

Parent и ChildA ничего не делают, а в GrandchildA хочет получить данные о десертах от App и отрендерить их, но в данный момент не может.

Первоначальный вид выглядит так:

Теперь для того, чтобы App предоставил данные о десертах любому потомку, мы можем использовать опцию provide. Опция provide может предоставить набор данных или даже сам текущий компонент. Здесь мы просто предоставим весь экземпляр App:

В объекте, возвращаемом в provide(), мы называем ключ app, а значение this указывает на текущий экземпляр App. Он элегантный и очень простой в использовании.

Теперь в GrandchildA, который хочет потреблять данные (данные находятся в экземпляре App, когда мы можем получить экземпляр App, мы можем получить доступ к его опции data), мы будем использовать опцию inject:

Значением ключа inject может быть массив или объект. Теперь к экземпляру App можно получить прямой доступ в GrandchildA! Следовательно, мы можем повторить app.desserts и отобразить его на странице:

Кроме того, мы распечатываем экземпляр GrandchildA:

Мы можем ясно видеть экземпляр App и все, что на нем есть.

Концепция «Provide/Inject» в библиотеках управления состоянием, таких как Vuex и Redux

Как сказано в Части 1 этой серии:

«Vuex отлично подходит для обмена данными между компонентами, но когда дело доходит до некоторых сценариев, таких как создание библиотеки пользовательского интерфейса или библиотеки управления состоянием, Vuex больше не подходит, и нам нужно использовать сборку. в механизме самого Vue».

Библиотеки управления состоянием, такие как Redux и Vuex, реализуют концепцию «предоставить/внедрить». Экземпляр store внедряется в каждый компонент в иерархии:

Вот все статьи из этой серии:

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 1

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 2

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 3

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 4

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 5

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 6

Шаблоны взаимодействия компонентов Vue.js (без Vuex) — часть 7