Как лучше вызывать модальные окна, alerts и т.п. в приложении на VueJS?

Question

[Дмитрий Кузнецов]

Потихоньку разрабатываю сайт на Vuejs и возник у меня вопрос: Как лучше вызывать модальные окна, alerts и т.п?
Читал комментарий Александра Аксентьева (Как вызвать метод из другого компонента во vue.js?) о том, что можно использовать глобальные функции или vuex.
А как лучше сделать? Как у вас?

Заранее спасибо!)

Answer 1

[lavezzi1]

Модалки на страницах вызываю. А алерты, тосты и прочие уведомления глобальные, лежат в vuex. Когда надо выкинуть тостер с каким нибудь уведомлением делаю так.

this.$store.dispatch('showNotification', { type: 'Success', message: 'Item was renamed!' });

Comments

[Evgeny Kulakov]

А что в теле этого экшена сидит в итоге? Вызов какого-то глобального компонента, отвечающего за уведомления?

[lavezzi1]

const actions = {
  showNotification({ state }, notification) {
    state.toastsQueue.push(notification);
  },
};

App.vue

<toasts :queue="$store.getters.toastsQueue"></toasts>

[Дмитрий Кузнецов]

lavezzi1, можно поподробнее (я нуб)? или хотя бы урок какой нибудь.
PS: В гугле искал, ни чего толком не нашёл, а что нашёл (не совсем то, что нужно), то не понял...

[Evgeny Kulakov]

lavezzi1, хороший вариант.

Я последний раз использовал vue-snotify, очередь у него внутри уже сидит, примерно вот так:

this.$store.dispatch('some action')
.then((res) => {
  // if need alert
  this.$snotify.info('Some message')
})

Answer 2

[Evgeny Kulakov]

Вариантов масса, зависит от задачи:

1. Вызвать непосредственно из кода
2. Добавить компонент окна в шаблон текущего компонента и отображать по условию
3. При использовании vue-router открывать окно при заходе на соответствующий маршрут
думаю, что можно еще много что придумать.
Советую посмотреть исходники готовых компонентов, как в них реализованы модальные окна, типа:
https://buefy.github.io/#/documentation/modal или в других компонентных фреймворках или в отдельных компонентах.