Vuex - создать глобальный метод для отправки действий

Question

Где можно разместить глобальный метод, который отправляет действие Vuex? Я создал модуль Vuex "simplert", который имеет некоторые функции для отображения simplert . Я создал HTML-файл, в который я положил свой простой более простой

<simplert :use-radius="true"
              :use-icon="true"
              ref="simplert">
</simplert>

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

/* eslint-disable no-shadow */
/**
 * Vuex Module to control the component Simplert
 */
import { trans } from '../../plugin/translation';

// initial state
function initialState() {
    return {
        title: '',
        message: '',
        type: 'info',
        customClass: 'simplert-popup',
        customIconUrl: '',
        customCloseBtnText: trans('close'),
        customCloseBtnClass: 'btn btn-primary',
        useConfirmBtn: false,
        customConfirmBtnText: trans('confirm'),
        customConfirmBtnClass: 'btn btn-success',
        disableOverlayClick: '',
        hideAllButton: false,
        showXclose: true,
        onOpen: null,
        onConfirm: null,
        onClose: null,
    };
}

// state
const state = initialState();

// mutations
const mutations = {
    show(state, simplert) {
        simplert.openSimplert(state);
    },
    reset(state) {
        const s = initialState();
        Object.keys(s).forEach((key) => {
            state[key] = s[key];
        });
    },
    setData(state, data) {
        Object.keys(data).forEach((key) => {
            state[key] = data[key];
        });
    },
};

// actions
const actions = {
    reset({ commit }) {
        return new Promise((resolve) => {
            commit('reset');
            resolve();
        });
    },
    show({ dispatch, commit }, { alert, data }) {
        dispatch('reset').then(() => {
            commit('setData', data);
            commit('show', alert);
        });
    },
    showInfoAlert({ dispatch }, { alert, title, message }) {
        const data = {
            title,
            message,
            type: 'info',
        };

        dispatch('show', { alert, data });
    },
    showSuccessAlert({ dispatch }, { alert, title, message }) {
        const data = {
            title,
            message,
            type: 'success',
        };

        dispatch('show', { alert, data });
    },
    showErrorAlert({ dispatch }, { alert, title, message }) {
        const data = {
            title,
            message,
            type: 'error',
        };

        dispatch('show', { alert, data });
    },
    showWarningAlert({ dispatch }, { alert, title, message }) {
        const data = {
            title,
            message,
            type: 'warning',
        };

        dispatch('show', { alert, data });
    },
};

export default {
    namespaced: true,
    state,
    mutations,
    actions,
};

Теперь я хочу создать глобальный метод, который использует действие «showErrorAlert» для отображения ошибок, возникающих в Promise. Поэтому для отправки действия я использую этот простой код:

app.$store.dispatch('simplert/showErrorAlert', {
    alert: app.$refs.simplert,
    title: app.$trans('simplert_error_title'),
    message: response.body,
});

Но я хочу, чтобы этот код был внутри функции, которую легко вызывать из моих компонентов. Как мне это выразить? Внутри моего экземпляра Vue (но не рекомендуется из руководства) или внутри плагина (миксин или метод?)

Answer 1

Я думаю, что нашел правильный метод для управления этим сценарием.Я удалил «проще» модуля магазина и скопировал его функциональность в миксин.Поэтому я создал в папке mixin файл simplert.js, в который я поместил всю свою логику для управления более простыми оповещениями.Затем в своих компонентах я импортировал миксин, когда мне это нужно.Таким образом, я упростил управление проще и использую его только в тех компонентах, где это необходимо