Skip to content

Модальное хранилище

В старых версиях этой библиотеки открытие модального окна было возможно только путем передачи компонента. Подход остаётся основным и на текущий день, т.к. дает вам больше контроля и порядка в вашем коде. Однако существует много ситуаций, когда этот подход не удобен. Например, при разработке библиотеки возникает вопрос: как переопределить открытие модальных окон (как заменить модальное окно). Здесь на помощь приходит хранилище.

Инициализация

Для начала необходимо инициализировать хранилище (сохранить в нем нужные нам модальные окна). Все это делается с помощью функции конфигурации:

ts
import {config} from "jenesius-vue-modal";
import ModalConfirm from "./ModalConfirm";

config({
    store: {
        confirm: ModalConfirm
    }
})

В этом примере мы добавили в магазин одно модальное окно. Теперь его можно открыть по имени, передав туда ключ:

ts
openModal('confirm');

Конечно, методы pushModal и promptModal также поддерживают эту функциональность.

Проверка модального окна

Если вы пишете библиотеку, для лучшей совместимости добавлена функция, проверяющая наличие модального окна в хранилище:

ts
import {getComponentFromStore} from "jenesius-vue-modal";
getComponentFromStore('alert') // undefined
getComponentFromStore('confirm') // Component

Возвращает компонент VueComponent, если он был ранее инициализирован в хранилище, в противном случае undefined.