Получение асинхронных данных из одного модуля в другой?

Question

[aheadweb]

Есть 2 модуля в Vuex.
Модуль А, получает данные с сервака и кладет в свой стор. Модуль Б, должен взять данные из модуля А.
Проблема заключается в том, что когда из Модуля Б, стучусь через геттер или экшен в модуль А и прошу показать мне данные в сторе, то их еще нет, т.е. с сервака они не пришли.

Модуль А

import {getProducts} from "../api";

export default {
    state: {
        products: [],
    },

    mutations: {
        setProducts(state, products) {
            state.products = products;
        }
    },

    getters: {
        getProducts({products}) {
            return products;
        },

    },

    actions: {
        async fetchProducts({commit}) {
            commit("setProducts", await getProducts());
        },
    }
}

Модуль Б

export default {
    state: {
        size: 10,
        listProduct: [],
    },
    mutations: {
        setListProducts(state,payload) {
            console.log(payload)
        }
    },
    getters: {
        listProducts(state) {
            return state.listProduct;
        },
        getAllItemsFromProductsStore(_, getters, rootState) {
            return rootState.products.products;
        }
    },
    actions: {
        setListProducts({getters, commit}) {
            let localProducts = getters.getAllItemsFromProductsStore;
        }
    }
}

Собственно вопрос, как правильно реализовать полученние данных из одного модуля в другой, при этом чтобы геттер\экшен уже вернул данные после прихода ответа с сервака модуля А?

Как вариант предполагаю в методах компонента, перезапрашивать экшен модуля Б, до тех пор пока модуль А не вернет НЕ пустой массив. Но насколько этот вариант правильный?

Comments

[twoone]

Я никогда не работал с vuex модулями, но разве их данные не реактивные? Разве компонент не должен самостоятельно перерисоватся при их изменении? Вы отслеживаете изменение в watch?

Answer 1

[Aetae]

В getter - никак. В action - просто запускать action модуля А и await его. Чтоб не запускать action модуля A несколько раз - можно сделать дополнительно - проксируеще-кеширущий action-прокладку, который будет запускать нужный action один раз и пока не будет ответа - на все следующие запросы отдавать Promise текущего.