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

debugcn 发表于 Dev

德鲁特

我没有改变我的代码，但上周 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 数据库有很多条目。

发生这种情况真的很令人沮丧。正如我所说，我没有更改代码，它工作了几个月，现在没有了。

有谁知道为什么会这样？

德鲁特

我终于找到了这个问题的根源以及如何解决。

一些混乱是由以下事实引起的，因为我的应用程序仍处于早期开发阶段，它实际上是从 CDN 而不是从本地依赖项加载 Vuefire。

最近 Vuefire 开发人员已从 1.x 更改为 2.x 作为其官方稳定版本。也就是说，似乎在 2.x（现在是稳定通道）和 3.x（下一个预发布候选）版本中，随着主要焦点转移到 Cloudstore，实时数据库实现现在存在重大问题。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。