带有Firebase实时数据库和VueFire的Vue.js应用突然停止工作

时间:2019-06-10 18:47:45

标签: javascript vue.js firebase-realtime-database vuefire

我没有更改代码,但是上周VueFire停止加载任何数据。我曾尝试恢复到旧版本的Vue和VueFire,但似乎找不到导致此问题的原因。

目前,我的代码与此处的文档几乎相同:https://vuefire.vuejs.org/vuefire/#why

    // Vue.js
    let config = {
        apiKey: "<?php echo getenv('FB_API_KEY'); ?>",
        authDomain: "<?php echo getenv('FB_AUTH_DOMAIN'); ?>",
        databaseURL: "<?php echo getenv('FB_DB_URL'); ?>",
        projectId: "esportsgametrainers",
        storageBucket: "<?php echo getenv('FB_STORAGE_BUCKET'); ?>",
        messagingSenderId: "<?php echo getenv('FB_MSG_SENDER_ID'); ?>"
    };

    let app = firebase.initializeApp(config);
    let db = app.database();

    // Open Session Ref.
    let openSessionsRef = db.ref('openSessions');

    let vm = new Vue({
        el: '#open_training_sessions',
        data: () => ({ openSessions: [] }),
        firebase: {
            openSessions: openSessionsRef
        },
        computed: {
            latestOpenSessions: function () {
                console.log('??', this.openSessions);
                //return this.openSessions;
                return this.openSessions.filter(function (session) {
                    console.log(session);
                    return session;
                    // Only unaccepted games
                    if (!session.accepted) {
                        // Date filter
                        let currentTime = new Date().getTime();
                        let sessionCreated = new Date(session.CreatedDate).getTime();
                        if (sessionCreated < currentTime) {
                            let offset = currentTime - sessionCreated;
                            if (offset / 3600000 < 3) {
                                return session;
                            }
                        } else {
                            return session;
                        }
                    }
                });
            }
        }
    });

添加以下行:data: () => ({ openSessions: [] }),之后,应用程序不再抛出错误,但是数组的内容始终为空,而我正在加载的Firebase DB包含许多条目。

这真令人沮丧。正如我所说,我没有更改代码,它已经工作了几个月,现在却没有。

有人知道为什么会这样吗?

1 个答案:

答案 0 :(得分:0)

我终于找到了此问题的根源以及解决方法。

一些困惑是由于以下事实引起的:由于我的应用仍在早期开发中,因此实际上是从CDN而不是从本地依赖项加载Vuefire。

最近,Vuefire开发人员的官方稳定版本已从1.x更改为2.x。就是说,似乎在2.x(现在是稳定的频道)和3.x(下一个预发行版本)发行版中,主要重点转移到了Cloudstore上,现在实时数据库实现存在主要问题。

将Vuefire降级到1.4.5版(最新的1.x版本)后,我所有的原始源代码都再次按预期工作。