Vuex - 创建全局方法来调度动作答案

【问题标题】：Vuex - Create global method to dispatch actionVuex - 创建全局方法来调度动作
【发布时间】：2018-08-25 09:38:56
【问题描述】：

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

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

我用它来通过 store 模块的功能显示一些简单的消息（信息、警告、错误等）。这是我的模块：

/* 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 或方法？）

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：