Firestore 是一种快速、可扩展且云原生的 NoSQL 数据库，它可以让你轻松地存储和同步数据。VueJs 是一个流行的前端框架，它提供了一个优雅清晰的方式来构建应用程序。当这两个工具结合在一起时，可以创造出一个强大的应用程序，具有可扩展性和高性能。
在本文中，将介绍如何在 VueJs 应用程序中使用 Firestore，从获取 Firestore 实例到执行基本的 CRUD 操作，直到使用 Firestore 观察者进行实时更新。
获取 Firestore 实例
要使用 Firestore，需要在 VueJs 项目中安装 firebase 包。可以使用 npm 包管理器进行安装。
npm install firebase
Firebase 包提供了 Firebase SDK，其中包含 Firebase 产品的所有库。在 Firebase SDK 中，可以使用 firebase/app 包来导入要使用的 Firebase 产品的特定库。在 VueJs 应用程序中的 main.js 文件中导入 Firebase 和 firebase/app 库。
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ -------- ---- -------------- ------------------------ - ----- ----- -------------- - - -- -------- ----- - -------------------------------------- --- ----- ------- - -- ------- -----------------
Firestore 是 Firebase 的一个产品，因此可以使用 firebase/app 导入 Firestore 库。
import firebase from 'firebase/app' import 'firebase/firestore' const db = firebase.firestore()
Firestore 实例通过调用 firebase.firestore() 方法创建，然后可以使用该实例来读取或写入数据。
基本的 CRUD 操作
Firestore 是一个非常易于使用的 NoSQL 数据库，它提供了基本的 CRUD 操作，包括创建、读取、更新和删除。
创建数据
db.collection('users').add({
name: 'John Doe',
phoneNumber: '+1 (555) 123-4567',
email: 'johndoe@example.com',
})创建新文档时，可以使用 collection() 和 add() 方法。collection() 方法接受一个字串作为集合名称，add() 方法接受一个对象作为数据。
读取数据
db.collection('users').get().then(snapshot => {
snapshot.forEach(doc => {
console.log(doc.id, '=>', doc.data())
})
})要检索文档，可以使用 collection() 和 get() 方法。collection() 方法接受一个参数代表集合名称，并返回一个 collection 对象。get() 方法返回集合中的所有文档的快照。可以处理此快照并读取每个文档的数据。
更新数据
const docRef = db.collection('users').doc('SOME_USER_ID')
docRef.update({
email: 'updated-email@example.com',
})要更新文档，可以获取一个DocumentReference 对象并使用 update() 方法。
删除数据
const docRef = db.collection('users').doc('SOME_USER_ID')
docRef.delete().then(() => {
console.log('Document deleted successfully.')
}).catch(error => {
console.error('Error deleting document: ', error)
})要从集合中删除文档，可以获取一个 DocumentReference 对象并使用 delete() 方法。
实时更新数据
Firestore 提供实时服务，即每当数据更改时，它都可以自动获取更改。在 VueJs 应用程序中，可以使用 onSnapshot() 方法来监听文档和集合的更改并更新应用程序中的数据。
-- -------------------- ---- -------
----- -------- - ----------------------
---------------------------- -- -
----- ----- - --
-------------------- -- -
------------ --- ------- ----- ---------- --
--
------------------ ----- -- ------
--onSnapshot() 方法接受一个回调函数，每当文档或集合更改时，都会触发该回调函数。回调函数传递一个包含所有文档数据的快照。可以使用此快照将更新应用程序中的数据。
组合使用 Firestore 和 VueJs
VueJs 是一个响应式框架，可以轻松地将应用程序中的数据与 Firestore 视图集成。以下是将 VueJs 和 Firestore 组合使用的示例。
-- -------------------- ---- -------
----------
-----
-------------
----
--- ----------- -- ------ ---------------
------ -------------- -------
----- --------------- ------
----- --------------------- ------
-----
-----
------
-----------
--------
------ -------- ---- --------------
------ --------------------
------ ------- -
----- -----------
----- -- -- --
------ ---
---
---------- -
------ -----------------------------------------
--
--------- -
------------------------------ -- -
----- ----- - --
-------------------- -- -
------------ --- ------- ----- ---------- --
--
---------- - -----
--
--
-
---------在上面的示例中，模板将呈现 users 集合的数据。可以使用 firestore 对象来将集合与应用程序集成。然后，在挂载组件时使用 onSnapshot 方法来监听集合的变化并更新组件的数据。
结论
Firestore 是一种功能强大的 NoSQL 数据库，VueJs 是一个流行的前端框架。将两者结合使用可以创建具有高可扩展性和高性能的应用程序。在本文中，介绍了在 VueJs 应用程序中使用 Firestore 的基础知识。现在，您可以在自己的应用程序中使用 Firestore 和 VueJs 了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67324d770bc820c5823cc518