简介
Vuefire是一个让你在Vue.js应用程序中简便的使用Firebase的包。而@posva/vuefire-core是Vuefire的核心库。本文将详细介绍如何使用该npm包，并提供示例代码。
安装
你可以通过npm来安装@posva/vuefire-core包。并且此包是peer-dependency，同时安装@firebase/app和@firebase/firestore也是必须的。
npm install @posva/vuefire-core @firebase/app @firebase/firestore
引入
引入@posva/vuefire-core很简单，只需按照下面的方式：
-- -------------------- ---- ------- ------ --- ---- ----- ------ - --------------- - ---- --------- ------ - ------------- - ---- -------------- ------ - ------------ - ---- -------------------- ------ - --------- - ---- --------------------- ------------------------ ----- ----------- - --------------- ---------- --- ------- --- -- --- -- ----- -- - ------------------------- ------------------------------------------ ----------------------------------
上面的代码中，创建了Firebase应用程序并初始化Firestore实例。同时还引入了firestore-plugin，这是一个非常有用的插件，它提供了全局绑定集合，文档和查询的能力。
使用
配置完成之后，我们可以使用@posva/vuefire-core的两个主要函数绑定集合或文档。
绑定集合
你可以使用bindCollection函数对集合进行绑定。bindCollection是一个Vue Property，它读取从获取数据。同时还支持剪裁功能以便只显示一部分数据或进行排序。
-- -------------------- ---- -------
------ - -------------- - ---- ---------------------
------ ------- -
------ -
------ -
------ --
-
--
----------- -
------ -
------ -------------------------------------- - ------------ - -- -- -------
-
-
-绑定文档
你可以使用bindDocument函数对文档进行绑定。它是一个Vue的Property，用于读取数据并且当文档变化时会自动更新数据。
-- -------------------- ---- -------
------ - ------------ - ---- ---------------------
------ ------- -
------ -
------ -
----- --
-
--
----------- -
------ -
----- -------------------------------------------------
-
-
-示例代码
下面是完整代码的示例，展示了如何使用@posva/vuefire-core对Firestore进行绑定。
-- -------------------- ---- -------
----------
-----
------ ---------
----
--- ----------- -- ------
---------------
----
------------ ------------- - ----------- ---------- ----------------
-----
----- ---------------- ------
-----
-----
------
-----------
--------
------ - -------------- - ---- ---------------------
------ ------- -
------ -
------ -
------ --
-
--
----------- -
------ -
------ -------------------------------------- - ------------ - -- -- -------
-
-
-
---------上面的代码是一个非常基本的博客示例，它绑定了Firestore中的“posts”集合，并将其呈现为单个博客列表。我们可以看到bindCollection的使用以及数据绑定的表达。
总结
在本文中，我们了解了如何使用npm包@posva/vuefire-core进行Firestore的绑定。我们还讨论了如何使用bindCollection和bindDocument函数，以及如何在Vue组件中使用这些函数。
像我们展示的这样使用@posva/vuefire-core这一npm包，可以帮助我们更快地开发Vue.js应用程序。 该npm包提供了许多便捷的工具来帮助我们更加轻松地与Firebase与Firestore建立连接，减小了我们从底层建立连接的负担，提高了我们的开发效率和生产力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc18b5cbfe1ea06126e7