Vuex и firebase слушатели

Question

Я использую декораторы машинописного текста и класса vuex.

1. В пределах created() подключить в компоненте Vue моего приложения я называю действие Vuex listenToDataXY которая сама вызывает функцию в отдельном файле API, где находится Firestore onSnapshot Метод / наблюдатель размещен.

2. Если я правильно понимаю, я не могу просто вернуть обещание от этой функции API обратно в мое действие vuex, потому что оно не сработает снова в будущем, как только будут получены новые данные. Итак, вместо того, чтобы вернуть обещание, я хочу просто изменить состояние изнутри onSnapshot обратный вызов в файле API напрямую (это нормально?).

3. Для этого я импортировал mutations не получить доступ к государству напрямую. Но я не понял, как правильно вызвать функцию мутации из файла, не связанного с магазином (файл API).

4. Мой компонент Vue получает обновленное значение через геттеры.

5. Как бы вы обычно настраивали свой код / ​​файлы в четко структурированном виде, чтобы достичь вышеуказанного (прислушиваться к изменениям в firestore и соответственно обновлять состояние)?

Answer 1

Итак, я сделал следующее:

// actions.ts

getDataXY(context) {
    context.commit('setLoading', true)
    xyAPI.setupXYListener(context)
},

onXYChanged({ commit }, payload) {
    commit('setLoading', false)
    if (payload.xy) {
        commit('setXY', payload.xy)
    }
    if (payload.err) {
        commit('setErrorMessage', payload.err)
    }
},

// xyAPI.ts

setupXYListener(context: any) {
    xyCollection.onSnapshot(
        snapshot => {
            const xy = snapshot.docs[0].data()
            context.dispatch('onXYChanged', { xy: xy, err: null })
        },
        err => {
            context.dispatch('onXYChanged', { xy: null, err: err })
        }
    )
},

Если кто-то увидит лучшую архитектуру, структуру или другие улучшения, я очень благодарен за комментарии.