无需硬重新加载即可刷新 vue.js 应用程序答案

【问题标题】：Refreshing vue.js app without hard reloading无需硬重新加载即可刷新 vue.js 应用程序
【发布时间】：2019-10-03 04:54:25
【问题描述】：

我正在根据 Medium 上发布的教程构建一个 Vue.js 待办事项列表 CRUD 应用程序：（第 1 部分）https://medium.com/@magyarn/vuefire-crud-todo-list-app-part-1-e069c46b50c6，（第 2 部分）https://medium.com/@magyarn/vuefire-crud-todo-list-app-part-2-8bd61ae0d066

我完整地构建了应用程序，并成功地将其连接到 Firestore 数据库。但是，一旦将列表项添加到数据库中，似乎没有办法在 DOM 上呈现列表项。换句话说，我必须单击浏览器刷新按钮才能在屏幕上看到已添加到数据库中的列表项。为了解决这个问题，我在每个方法中添加了 window.location.reload，以便在我单击添加、编辑或删除时自动触发页面重新加载，但这似乎不是一个好的长期解决方案。这是一个例子：

    addTodo() {
      todosCollection.add({
        text: this.newTodo,
        completed: false,
        id: this.todos.length,
        createdAt: new Date()
      })
      .then(() => {
        window.location.reload()
      })

   deleteTodo(todo) {
      todosCollection.doc(todo.id).delete()
      .then(() => {
        window.location.reload()
      })
    },

我还添加了一个特殊的钩子，以便在手动刷新后检索数据库中的项目并将它们呈现到 DOM：

methods: {
...
},
created(){
    todosCollection.get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        let newTodo = doc.data()
        newTodo.id = doc.id
        this.todos.push(newTodo)
      })
    })
  }

我的问题是，对于这种单页 Vue.js 应用，在不重新加载的情况下处理刷新的最佳方法是什么？谢谢！

【问题讨论】：

您应该使用 Firebase 的实时更新功能。你现在如何获得todos的列表？
嗨@ittus，我使用带有get 方法的“created()”钩子来检索数据库中的列表项，然后将它们推送到“todos”数组中。这似乎可以获取列表，但我仍然必须点击浏览器中的刷新按钮才能将内容呈现到屏幕上。我刚刚用创建的钩子更新了我的帖子。
这些通常是您使用vuex 存储来处理集合操作的场景。它有助于确保您应用的所有组件在任何给定时间点都有更新的数据。

标签： javascript firebase vue.js google-cloud-firestore

【解决方案1】：

有几种方法可以做到：

方法一： 使用 Vuefire 绑定

删除你在created中的getting list并将以下代码添加到你的组件中：

  firestore() {
    return {
      todos: todosCollection.orderBy('createdAt', 'desc')
    }
  },

Vuefire document

方法二： 手动更新您的列表。首先，将获取数据的方法分开，并在created钩子中和每个动作之后调用它

created() {
  this.getData()  
},
methods: {
  getData() {
    const todos = []
    todosCollection.get()
    .then(snapshot => {
      snapshot.forEach(doc => {
        let newTodo = doc.data()
        newTodo.id = doc.id
        todos.push(newTodo)
      })
      this.todos = todos
    })
  },
  addTodo() {
      todosCollection.add({
        text: this.newTodo,
        completed: false,
        id: this.todos.length,
        createdAt: new Date()
      })
      .then(() => {
        this.getData()
      })
  },
  deleteTodo(todo) {
    todosCollection.doc(todo.id).delete()
    .then(() => {
      this.getData()
    })
  },
}

【讨论】：