使用 firebase 和 vue.js 读取数据

Question

我不是很有经验，我想知道如何从 firebase 中提取数据，更新 vue.js 的状态元素。问题是我无法提取专用于 firebase "snapshot" 的融合数据。我将所有代码和所有错误留给您。

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] 日志语句。这也意味着您不能 return 从函数中获取数据库中的值，因为 return 在数据加载之前运行。

使用 firebase 和 vue.js 读取数据

Reading data with firebase and vue.js

javascript

firebase

vue.js

firebase-realtime-database

vue-cli-3