Question

我正在基于发布在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应用，无需重新加载即可处理刷新的最佳方法是什么？谢谢！

Answer 1

有几种方法可以做到：

方法1： 使用Vuefire绑定

删除已创建的获取列表，并将以下代码添加到您的组件中：

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

Vuefire document

方法2： 手动更新您的列表。首先，将数据分别获取到一个方法中，并在每次操作后在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()
    })
  },
}

无需重新加载即可刷新vue.js应用

1 个答案: