[英]Vue.js app with Firebase realtime database and VueFire suddenly stopped working
I have not changed my code whatsoever, but last week VueFire stopped loading any data. 我没有改变我的代码,但上周VueFire停止加载任何数据。 I have tried reverting to older versions of the Vue and VueFire but I can't seem to find what has caused the issue. 我已经尝试恢复到旧版本的Vue和VueFire但我似乎找不到导致问题的原因。
At the moment my code is nearly identical to documentation available here: https://vuefire.vuejs.org/vuefire/#why 目前我的代码几乎与此处提供的文档相同: 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;
}
}
});
}
}
});
After adding the line: data: () => ({ openSessions: [] }),
the app is no longer throwing errors, however the contents of the array are always empty, while the Firebase DB I am loading has many entries. 添加行: data: () => ({ openSessions: [] }),
应用程序不再抛出错误,但是数组的内容始终为空,而我加载的Firebase数据库有很多条目。
It's really frustrating that this has happened. 发生这种情况真的很令人沮丧。 As I said, I did not change the code, it worked for several months and now it does not. 正如我所说,我没有改变代码,它工作了几个月,现在却没有。
Does anyone know why this is happening? 有谁知道为什么会这样?
I have finally discovered the source of this issue and how to fix. 我终于发现了这个问题的根源以及如何修复。
Some of the confusion was caused by the fact that, since my app is still in early development it was actually loading Vuefire from CDN rather than from a local dependency. 一些混乱是由于这样一个事实造成的,因为我的应用程序仍处于早期开发状态,它实际上是从CDN加载Vuefire而不是从本地依赖项加载。
Recently Vuefire devs have changed from 1.x to 2.x as their official stable release. 最近Vuefire开发者已经从1.x变为2.x作为他们的官方稳定版本。 That said, it would seem that in 2.x (now the stable channel) and 3.x (next pre-release candidate) releases, with the main focus shifting to Cloudstore, there are now major problems with Realtime Database implementations. 也就是说,似乎在2.x(现在是稳定通道)和3.x(下一个预发布候选版本)版本中,主要焦点转移到Cloudstore,现在实时数据库实现存在重大问题。
After downgrading Vuefire to version 1.4.5 (latest 1.x release) all of my original source code is once again working as expected. 在将Vuefire降级到版本1.4.5(最新的1.x版本)后,我的所有原始源代码再次按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.