从Firebase集合中获取项并将其用作Vue中的列表

npm install vuefire firebase

import firebase from 'firebase/app';
import 'firebase/database';
import { firestorePlugin } from 'vuefire';

// 初始化Firebase
firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID'
});

// 使用VueFire插件
Vue.use(firestorePlugin);

// 创建Vue实例
new Vue({
  // ...
  created() {
    // 获取Firebase数据库引用
    const db = firebase.database();

    // 获取Firebase集合中的数据
    db.ref('collectionName').once('value')
      .then(snapshot => {
        // 处理数据
        const data = snapshot.val();
        // 将数据用作Vue中的列表
        this.items = Object.values(data);
      })
      .catch(error => {
        console.log(error);
      });
  },
  // ...
});