Vue JS:等待firebase加载

时间:2018-06-06 11:37:04

标签: javascript firebase vue.js

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

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

例子:我想创建一个名为loader的vue组合,它在创建时在webconsole上输出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:

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

1 个答案:

答案 0 :(得分:0)

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