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

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

0 голосов
/ 12 ноября 2018

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

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

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

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

1 Ответ

0 голосов
/ 13 ноября 2018

Я создал для себя плагин 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]
});
...