从Firestore删除数据库条目

This is the final article from the short Vue and Firestore series. In this article, we will delete the entries from our Firestore database.

这是简短的Vue和Firestore系列的最后一篇文章。 在本文中，我们将从Firestore数据库中删除条目。

介绍 (Introduction)

We have created our app, created a database, configured that database to run in the app, sent our notes to the database, and also fetched notes from the database.

我们已经创建了应用程序，创建了数据库，配置了该数据库以在应用程序中运行，将注释发送到数据库，还从数据库中获取了注释。

We can create new notes which are stored in a database so we don’t lose our notes when we refresh the page. But we don’t have a way to delete any notes. Let’s make that happen.

我们可以创建存储在数据库中的新笔记，因此刷新页面时不会丢失笔记。 但是我们没有办法删除任何笔记。 让我们做到这一点。

添加按钮以删除笔记 (Adding a button to delete notes)

We will add a button beside each note. Clicking that button will run a method that will remove the note from our notes array and will then delete that note from the database.

我们将在每个音符旁边添加一个按钮。 单击该按钮将运行一种方法，该方法将从notes数组中删除便笺，然后从数据库中删除该便笺。

We have to remove it from the notes array as well as the database since even though it's removed from the database, it will still show on our screen until we refresh the page. Only after we refresh the page, will the array be populated with the notes in the database and reflect our changes.

我们必须将其从notes数组以及数据库中删除，因为即使将其从数据库中删除，它仍然会显示在屏幕上，直到刷新页面为止。 只有刷新页面后，阵列中的注释才会填充到数据库中，并反映出我们的更改。

So removing it from the array will make sure we see the changes immediately.

因此，将其从阵列中删除将确保我们立即看到更改。

Let’s add the button with the click listener before the title of the note:

让我们在笔记标题的前面添加带有单击侦听器的按钮：

删除笔记方法 (Delete notes method)

With the button added, all that’s left is the method. Removing the note from the array should be easy:

添加按钮后，剩下的就是方法。 从数组中删除注释应该很容易：

Removing the note from the database takes a bit more code, but nothing too complex:

从数据库中删除注释需要更多代码，但没有什么太复杂的：

Let’s go over this to understand it better.

让我们仔细研究一下，以更好地理解它。

从数据库中删除内容 (Deleting content from the database)

First, we have a string docToDeleteId. As the name of the variable suggests, it will hold the id of the document that will be removed from the database (all entries in the Firestore database are called documents). To delete a document or database entry, we will need its id.

首先，我们有一个字符串docToDeleteId 。 就像变量名所暗示的那样，它将保存将从数据库中删除的文档的ID(Firestore数据库中的所有条目都称为文档)。 要删除文档或数据库条目，我们将需要其ID。

Now how will we get this id?

现在，我们将如何获得此ID？

We have the title of the note passed to the deleteNote method from the click listener. Using that, we fetch the specific note from the database:

我们已将注释的标题从单击侦听器传递到deleteNote方法。 使用它，我们从数据库中获取特定的注释：

The first parameter in the db.collection().where() method is the title field in the document (remember each document or note in the database has 2 fields - title and content). The second parameter is self-explanatory - it means the first parameter should be equal to the third. The third parameter is our title argument.

db.collection().where()方法中的第一个参数是文档中的标题字段(请记住数据库中的每个文档或注释都有2个字段-标题和内容)。 第二个参数不言自明-这意味着第一个参数应等于第三个参数。 第三个参数是我们的title参数。

We got the note which has the same title as the note we want to delete. From this, we will get the id given to that note in the database:

我们得到的笔记的标题与我们要删除的笔记的标题相同。 由此，我们将获得数据库中给该注释的ID：

We store this id in the variable we created at the start.

我们将此ID存储在开始时创建的变量中。

Now we delete this note from the database by specifying the id of the database entry we want to delete:

现在，我们通过指定要删除的数据库条目的ID从数据库中删除此注释：

That was a bit more complex than the code to simply add and fetch content to and from the database. But other than getting the id of the document entry, the rest was hopefully not that difficult to understand.

这比简单地在数据库中添加内容或从中获取内容的代码要复杂得多。 但是，除了获取文档条目的ID外，其余的都希望不难理解。

整理系列 (Wrapping up the series)

This wraps up the Vue Note Taker series here. We created a note-taking Vue app with simple features — it allows us to create notes, saves them to a database, and delete the notes.

这里总结了Vue Note Taker系列。 我们创建了一个具有简单功能的笔记Vue应用程序-它允许我们创建笔记，将其保存到数据库以及删除笔记。

It doesn’t end here though. There are a lot of features that can be added to this app. For example — an edit feature to edit existing notes, making sure two notes do not have the same title to avoid deleting both notes when intending to delete only one of them, sharing your notes with others, etc.

它并没有到这里结束。 有很多功能可以添加到此应用程序中。 例如，一种编辑功能，用于编辑现有便笺，确保两个便笺没有相同的标题，以避免在打算仅删除其中一个便笺，与他人共享您的便笺时删除两个便笺。

You can add these features and any others you can think of. Though the edit feature will take a bit of tinkering and diving into the docs. Or maybe, you can do things differently than I have and change the whole app. Have fun with it and try out new stuff.

您可以添加这些功能以及您可以想到的任何其他功能。 尽管编辑功能将需要一些修补和深入研究文档 。 或者，也许您可​​以做的事与我不同，并且可以更改整个应用程序。 玩得开心，尝试新事物。

I hope you got to learn something new from this tutorial series. If you have any questions or suggestions, feel free to leave them in the comments below.

我希望您能从本教程系列中学到一些新知识。 如果您有任何疑问或建议，请随时在下面的评论中留下。

Originally published at dev.to.

本来在发表 dev.to 。

翻译自: https://medium.com/swlh/deleting-database-entries-from-firestore-bcdab8fc7287