Vuex и firebase слушатели - PullRequest
Новая
       10

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

0 голосов
/ 27 декабря 2018

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

  1. В хуке created() компонента vue моего приложения я вызываю действие vuex listenToDataXY, котороесама вызывает функцию в отдельном API-файле, в котором находится метод / наблюдатель firestore onSnapshot.

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

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

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

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

1 Ответ

0 голосов
/ 28 декабря 2018

Хорошо, я сделал следующее:

// 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 })
        }
    )
},

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

...