文章/答案/技术大牛

发布

社区首页 >问答首页 >Vuex和firebase听者

问Vuex和firebase听者
EN

Stack Overflow用户

提问于 2018-12-27 19:15:53

回答 1查看 725关注 0票数 0

我用的是打字稿和高级装潢师。

在我的应用程序的vue组件中的created()钩子中，我调用一个vuex操作listenToDataXY，它本身在一个单独的onSnapshot文件中调用一个函数，其中放置了onSnapshot方法/观察者。
如果我正确理解它，我就不能将api函数的承诺返回给我的vuex操作，因为一旦检索到新的数据，它将不会再次触发。因此，我不想返回承诺，而是直接从api文件中的onSnapshot回调中修改状态(可以吗？)
为了做到这一点，我导入了mutations以不直接访问状态。但我还没有弄清楚如何正确地调用非存储相关文件(api文件)中的突变函数。
我的vue组件通过getter检索更新的值。
为了达到上述目的，您通常如何以干净的结构化方式设置代码/文件(侦听防火墙的更改并相应地更新状态)？

firebase

vue.js

vuex

vuex-modules

回答 1

Stack Overflow用户

发布于 2018-12-28 11:40:41

好的，我做了以下工作：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53949800

复制

相似问题

问Vuex和firebase听者
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vuex和firebase听者EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vuex和firebase听者
EN