轻量级包装器Vuefire轻松实现与Firebase数据库保持同步

Firebase 是一个后端即服务（BaaS）平台，为开发人员提供各种工具和服务，用于构建和部署全栈应用。有了 Firebase，你就可以通过最少的 JavaScript 代码来实现许多 Vue.js 应用程序的后端功能。但是，将 Firebase 数据库添加到应用程序中可能会有一定的压力。Vuefire 是一个非常有帮助且轻量级的包装器，可轻松地将数据与 Firebase 数据库保持同步。它消除了手动操作的麻烦，并具有一些漂亮的内置逻辑，可以帮助完成困难的工作。

安装

#yarn
yarn add vuefire firebase

#npm
npm install vuefire firebase

用法

在使用 VueFire 之前，确保拥有 Firebase 帐户和项目设置。

• 请记住，有两种不同的数据库：Database 和 Firestore
• 假设，我们想通过 Firebase 创建一个 todo Vue.js 应用程序。那么需要设置 firestore 数据库。

首先我们在 Firebase 上创建一个项目来获取应用程序凭据。

随着项目启动和运行，现在可以设置 firestore 数据库了。

创建名为todos的第一个集合。

设置完 Firebase Firsestore Collection 之后，就可以使用 Vuefire 了。

import { initializeApp } from 'firebase/app'
import { getFirestore, collection } from 'firebase/firestore'
// ... other firebase imports

export const firebaseApp = initializeApp({
  // your application settings from Firebase
})

// used for the firestore refs
const db = getFirestore(firebaseApp)

// here we can export reusable database references
export const todosRef = collection(db, 'todos')

<script setup>
import { useCollection } from 'vuefire'
import { collection } from 'firebase/firestore'

const todos = useCollection(collection(db, 'todos'))
const someTodo = useDocument(doc(collection(db, 'todos'), 'someId'))
</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
     <span>{{ todo.text }}</span>
    </li>
  </ul>
</template>

插件地址：https://vuefire.vuejs.org/