Слушайте действия / мутации из модулей vuex

Question

У меня есть магазин Vuex с несколькими модулями, и я хочу иметь возможность слушать "глобальный" dispatch или же commit вызовы (иначе действия и мутации) из модуля. Например, в auth В модуле есть такие действия, как вход и выход из системы. Всякий раз, когда эти действия отправляются, я хочу другой модуль ui также выполнить какое-то действие, например, установить язык на основе зарегистрированного пользователя.

Я знаю, что могу просто отправить ui действия из действий входа и выхода в auth модуль. Но я бы предпочел, чтобы все было наоборот. ui прослушивает события (действия и / или мутации), отправленные в auth, Таким образом, я могу легко создавать побочные эффекты, не меняя "оригинальный" модуль vuex.

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

Итак, мой вопрос; как из модуля vuex как я могу слушать действия / мутации, отправленные из других модулей?

Answer 1

Я создал для себя плагин vuex, который может запускать все обновления во всех магазинах. Но вы можете сделать что-нибудь еще, где я позвонил обновить.

Плагин:

const onModuleAValueChange= (store) => {
    store.watch(
        state => state.moduleA.value,
        (val, oldVal) => {
            // Don't do anything on init state
            if (!oldVal) return;

            // This will trigger all refresh actions on all store. But you can add anything here
            // Essentially does: 
            // store.dispatch(`moduleA/refresh`); 
            // store.dispatch(`moduleB/refresh`); 
            // store.dispatch(`moduleC/refresh`);
            for (let state in store.state) {
                const action = `${state}/refresh`;
                // If the store does not have an refresh action ignore
                if (store._actions[action]) store.dispatch(`${state}/refresh`);
            }

            // Additional action 
            store.dispatch(`moduleC/moduleC_Action`);
        }
    );
};

Ядро магазина:

export const store = new Vuex.Store({
    modules: {
        moduleA,
        moduleB,
        moduleC
    },
    plugins: [onModuleAValueChange]
});