Vuex 和 firebase 监听器

Question

我正在使用 typescript 和 vuex 类装饰器。

1. 在我的应用程序的 vue 组件中的 created() 挂钩中，我调用了一个 vuex 操作 listenToDataXY，它本身调用了一个单独的 api 文件中的函数，其中放置了 firestore onSnapshot 方法/观察者.

1234563因此，我不想返回一个承诺，而是直接在 api 文件中的 onSnapshot 回调中改变状态（可以吗？）。

2. 为此，我导入了mutations，而不是直接访问状态。但是我还没有弄清楚如何从与商店无关的文件（api文件）中正确调用突变函数。

3. 我的 vue 组件通过 getter 获取更新后的值。

4. 为了实现上述目的，您通常如何以清晰的结构化方式设置代码/文件（监听 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 })
        }
    )
},

如果有人看到更好的架构、结构或其他改进，我非常感谢 cmets。