Vue.js 带有 Firebase 实时数据库和 VueFire 的应用程序突然停止工作
Vue.js app with Firebase realtime database and VueFire suddenly stopped working
我没有更改我的代码,但上周 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(下一个 pre-release 候选)版本中,随着主要焦点转移到 Cloudstore,现在存在主要问题实时数据库实现。
将 Vuefire 降级到版本 1.4.5(最新 1.x 版本)后,我所有的原始源代码再次按预期工作。
我没有更改我的代码,但上周 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(下一个 pre-release 候选)版本中,随着主要焦点转移到 Cloudstore,现在存在主要问题实时数据库实现。
将 Vuefire 降级到版本 1.4.5(最新 1.x 版本)后,我所有的原始源代码再次按预期工作。