Firestore 是一种快速、可扩展且云原生的 NoSQL 数据库，它可以让你轻松地存储和同步数据。VueJs 是一个流行的前端框架，它提供了一个优雅清晰的方式来构建应用程序。当这两个工具结合在一起时，可以创造出一个强大的应用程序，具有可扩展性和高性能。
在本文中，将介绍如何在 VueJs 应用程序中使用 Firestore，从获取 Firestore 实例到执行基本的 CRUD 操作，直到使用 Firestore 观察者进行实时更新。
获取 Firestore 实例
要使用 Firestore，需要在 VueJs 项目中安装 firebase 包。可以使用 npm 包管理器进行安装。
--- ------- --------
Firebase 包提供了 Firebase SDK，其中包含 Firebase 产品的所有库。在 Firebase SDK 中，可以使用 firebase/app 包来导入要使用的 Firebase 产品的特定库。在 VueJs 应用程序中的 main.js 文件中导入 Firebase 和 firebase/app 库。
------ --- ---- ----- ------ --- ---- ----------- ------ -------- ---- -------------- ------------------------ - ----- ----- -------------- - - -- -------- ----- - -------------------------------------- --- ----- ------- - -- ------- -----------------
Firestore 是 Firebase 的一个产品，因此可以使用 firebase/app 导入 Firestore 库。
------ -------- ---- -------------- ------ -------------------- ----- -- - --------------------
Firestore 实例通过调用 firebase.firestore() 方法创建，然后可以使用该实例来读取或写入数据。
基本的 CRUD 操作
Firestore 是一个非常易于使用的 NoSQL 数据库，它提供了基本的 CRUD 操作，包括创建、读取、更新和删除。
创建数据
---------------------------- ----- ----- ----- ------------ --- ----- ---------- ------ ---------------------- --
创建新文档时，可以使用 collection() 和 add() 方法。collection() 方法接受一个字串作为集合名称，add() 方法接受一个对象作为数据。
读取数据
------------------------------------------ -- -
-------------------- -- -
------------------- ----- -----------
--
--要检索文档，可以使用 collection() 和 get() 方法。collection() 方法接受一个参数代表集合名称，并返回一个 collection 对象。get() 方法返回集合中的所有文档的快照。可以处理此快照并读取每个文档的数据。
更新数据
----- ------ - ------------------------------------------ --------------- ------ ---------------------------- --
要更新文档，可以获取一个DocumentReference 对象并使用 update() 方法。
删除数据
----- ------ - ------------------------------------------ ----------------------- -- - --------------------- ------- --------------- -------------- -- - -------------------- -------- --------- -- ------ --
要从集合中删除文档，可以获取一个 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