Mount

Mount — модуль www/frontend/_shared/js/mount.js для инициализации mount-контейнера и привязки state-данных.

Подготовка mount-контейнера

Mount-контейнер должен быть заранее подготовлен в HTML-блоке с атрибутом [data-medusa-app-id="{id}"] в разметке документа, где {id} — идентификатор контейнера. Пример:

<div data-medusa-app-id="default"></div>

Инициализация mount-контейнера

Для инициализации нужно импортировать и вызвать модуль mount(id), где в аргументе id передаётся значение атрибута data-medusa-app-id HTML-блока mount-контейнера. Пример:

import {mount} from '@shared/js/mount';

const mountModule = mount('default');

Инициализация state mount-контейнера

Перед инициализацией state для HTML-блока mount-контейнера должен присутствовать атрибут [data-medusa-state-id="{id}"], где {id} — идентификатор HTML-блока с raw-данными состояния. Пример:

<div data-medusa-app-id="default" data-medusa-state-id="medusa-state-default-1"></div>

Затем импортируется модуль state и передаётся в метод mount(id).state(module) в качестве аргумента module. Пример:

import {state} from '@shared/js/state';

mountModule.state(state);

Монтирование в контейнер

Монтирование контейнера выполняется вызовом метода each(callback), где в аргументе callback передаётся функция с двумя аргументами:

• node — DOM-элемент mount-контейнера;
• props — объект JavaScript с данными из state-блока.

Пример монтирования Vue-компонента:

import {createApp} from 'vue';
import DefaultTheme from './DefaultTheme.vue';
import './style.css';

mountModule.each((node, props) => {
   createApp(DefaultTheme, props).mount(node);
});