Обновление приложения vue.js без перезагрузки

Question

Я создаю приложение CRUD со списком задач Vue.js на основе учебника, размещенного на Medium: (часть 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

Метод 2: Обновите свой список вручную. Сначала разделите получение данных от метода и вызовите его в created hook, а после каждого действия

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()
    })
  },
}