使用 firebase 和 vue.js 读取数据

Question

我不是很有经验，我想知道如何从 firebase 中提取数据，更新 vue.js 的状态元素。问题是我无法提取专用于firebase“快照”的融合数据。 我把下面的所有代码和所有错误都留给你。

Vue.js 代码：

<template>
  <div id="app">

      <div>
        <h1>ON/OFF led</h1>
        <h2>Status: {{ device.status() }}</h2>
      </div>


  </div>
</template>

<script>
import Vue from 'vue'

import { deviceStatusRef } from './firebase';

var pinReport;


export default {
  data () {
    return {
      name: '',
      device: {
        nome: 'led',
        status: function(){
              deviceStatusRef.on("value", function(snapshot) {
                pinReport = snapshot.val();
                console.log("[1] - pinReport value --> " + pinReport);
              });
              console.log("[2] - pinReport VALUE --> " + pinReport);
              return pinReport;
            }
      }
    }
  },

}
</script>

<style>

</style>

Chrome 上的错误：

Answer 1

这是预期的行为。数据从 Firebase 异步加载。当您的 [2] 日志语句运行时，数据尚未加载，pinReport 未定义。

这意味着所有需要数据的代码都必须在回调中，就像你的[1] log 语句一样。这也意味着您不能通过函数从数据库中返回值，因为return 在数据加载之前运行。