【问题标题】:Vue JS : Wait firebase to loadVue JS:等待firebase加载
【发布时间】:2018-11-16 02:01:50
【问题描述】:

我想在 Vue JS 组件中使用 firebase,但似乎 firebase 对象是在我的组件创建后加载的。

有没有办法在执行 JS 代码之前等待 firebase 加载?

示例:我想创建一个名为 loader 的 vue 组合器,它在创建时在 web 控制台上输出 firebase 对象

<html>
<head>

    <!-- Firebase -->
<script defer src="/__/firebase/5.0.4/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/5.0.4/firebase-auth.js"></script>
<script defer src="/__/firebase/5.0.4/firebase-database.js"></script>
<script defer src="/__/firebase/5.0.4/firebase-messaging.js"></script>
<script defer src="/__/firebase/5.0.4/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<!-- Vue.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

</head>
<body>
    <div id="app"></div>
<script>
var loader =  {
    template: '<div></div>',
    created: function(){
        console.log(window.firebase); // undefined
    }
};
var app = new Vue({
    el : '#app',
    template : 
        `<div>
            <loader></loader>
        </div>`,
    components : {
        'loader' : loader
    }
});
</script>
</body>
</html>

它不起作用,但当然,一秒钟后我可以在控制台上输出 firebase 对象。

PS:

  • 这是我在这个网站上的第一个问题,所以如果您对如何提问有任何建议,我也会接受。
  • 我是法国人所以请原谅我的英语

【问题讨论】:

  • 在你的 Vue 脚本之前加载 firebase。
  • 我的 Vue 脚本是在正文部分的末尾加载的,而 firebase 脚本是在我的 html 文件的 head 部分中加载的
  • window.firebase 是否曾经设置过? stackoverflow.com/help/mcve Vue 可能与这个问题完全无关。 Firebase 应该可以在 firebase 脚本下方的任何脚本中访问。发布相关代码,这就是你加载firebase的方式。
  • 给我一些时间,我将编辑我的帖子以澄清我的例子
  • 是那些defer属性造成的,现在的例子就够了。

标签: javascript firebase vue.js


【解决方案1】:

您需要从 firebase 脚本中删除 defer 属性。一旦整个文档被解析,它将导致脚本被执行,这意味着您在正文中的脚本在 firebase 脚本之前运行。

【讨论】:

  • 如何去掉延迟?
猜你喜欢
  • 1970-01-01
  • 2019-01-18
  • 2016-12-16
  • 2022-01-25
  • 2021-11-30
  • 2011-07-21
  • 1970-01-01
  • 2012-02-21
  • 2018-04-01
相关资源
最近更新 更多