如何在VueJS 2中从Firebase获取并列出数据项？

咱们一步步来实现从Firebase获取水果数据并在Vue组件中展示的功能：

1. 准备工作：安装Firebase并配置项目 #

首先，你需要在项目里安装适配Vue 2的Firebase版本：

npm install firebase@8.x

注意：Vue.js 2建议使用Firebase 8.x版本，Firebase 9+是模块化API，适配Vue 2需要额外的兼容处理。

接下来，在项目的src目录下创建一个firebase.js配置文件，填入你的Firebase项目信息（从Firebase控制台获取）：

import firebase from 'firebase/app'
import 'firebase/database'

const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
};

// 初始化Firebase
firebase.initializeApp(firebaseConfig)

// 导出数据库引用，方便组件调用
export const db = firebase.database()

2. 修改FruitList.vue组件获取并展示数据 #

现在我们来更新你的FruitList组件，引入Firebase并实现数据获取逻辑：

<template>
  <div class="fruit-list">
    <!-- 加载状态提示 -->
    <div v-if="isLoading">正在加载水果数据...</div>
    <!-- 遍历展示水果列表 -->
    <div v-for="(fruit, id) in fruits" :key="id" class="fruit-item">
      {{ fruit.name }}
    </div>
    <!-- 空数据提示 -->
    <div v-if="!isLoading && fruits.length === 0">暂无水果数据</div>
  </div>
</template>

<script>
import { db } from '../firebase'

export default {
  name: "FruitList",
  data() {
    return {
      fruits: [],
      isLoading: true
    }
  },
  created() {
    // 实时监听Firebase中fruits节点的数据变化
    db.ref('fruits').on('value', (snapshot) => {
      const rawData = snapshot.val()
      // 将Firebase返回的对象格式转换为数组，同时保留每条数据的唯一key
      this.fruits = rawData ? Object.entries(rawData).map(([id, fruit]) => ({ id, ...fruit })) : []
      this.isLoading = false
    }, (error) => {
      console.error('获取数据失败:', error)
      this.isLoading = false
    })
  },
  beforeDestroy() {
    // 组件销毁时取消监听，避免内存泄漏
    db.ref('fruits').off()
  }
};
</script>

<style scoped>
.fruit-list {
  padding: 20px;
}
.fruit-item {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}
</style>

3. 关键细节说明 #

• 实时数据同步：使用on('value')而非once('value')，这样Firebase中的数据更新时，组件会自动同步最新内容，无需手动刷新。
• 数据格式转换：Firebase实时数据库返回的是键值对对象，我们用Object.entries()将其转为数组，同时保留每条数据的key作为v-for的唯一标识，避免渲染警告。
• 内存泄漏防护：在beforeDestroy钩子中调用off()取消监听，防止组件销毁后仍保持数据库连接。
• 用户体验优化：增加加载状态和空数据提示，让交互更流畅友好。

4. 确认Firebase数据库结构 #

确保你的Firebase实时数据库中fruits节点的数据结构类似这样：

{
  "fruits": {
    "fruit_001": {
      "name": "苹果"
    },
    "fruit_002": {
      "name": "香蕉"
    },
    "fruit_003": {
      "name": "橙子"
    }
  }
}

内容的提问来源于stack exchange，提问作者Askar