Question

在哪里可以放置派发Vuex动作的全局方法？我创建了一个Vuex模块“ simplert”，其中有一些功能可以显示simplert。我创建了一个HTML文件，在其中放置了我的单个simplert

<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实例内部（但不从指南中推荐）或在插件内部（mixin或方法？）

Answer 1

我认为我找到了管理这种情况的正确方法。我删除了存储模块的“简单”，并将其功能复制到了mixin中。因此，我在mixin的文件夹中创建了一个simplert.js文件，在其中放置了所有逻辑来管理simplert警报。然后在需要的时候在我的组件中导入了mixin。这样，我简化了simplert的管理，并且仅在需要它的组件中使用它

Answer 2

dispatch('ACTION', payload?, { root: true })

将 root 选项设置为 true 会分派 root 操作。在这种情况下，这将是 'ACTION'。

如果没有 root 选项，这将调度 'MODULE_NAME/ACTION_WITHIN_MODULE' 操作。

Vuex-创建全局方法来分派动作

2 个答案: