时间戳

首页 > 解决方案 > Vuex 和 firebase 监听器

firebase - Vuex 和 firebase 监听器

问题描述

我正在使用打字稿和 vuex 类装饰器。

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

  2. 如果我理解正确，我不能只将该 api 函数的承诺返回给我的 vuex 操作，因为一旦检索到新数据，它就不会在未来再次触发。因此，我不想返回一个承诺，而是想onSnapshot直接从 api 文件的回调中改变状态（可以吗？）。

  3. 为了做到这一点，我mutations直接输入了不访问状态。但是我还没有弄清楚如何正确地从与存储无关的文件（api 文件）中调用突变函数。

  4. 我的 vue 组件通过 getter 检索更新的值。

  5. 为了实现上述目的，您通常如何以一种清晰的结构化方式设置您的代码/文件（监听 Firestore 更改并相应地更新状态）？

标签： firebasevue.jsvuexvuex-modules

解决方案

好的，所以我所做的是以下内容：

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

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

推荐阅读