У меня проблема с автосохранением данных в VueJS, автосохранение не завершается, когда я меняю текущую заметку

Question

, значит, у меня проблема с моим приложением. Я не уверен, как правильно реализовать эту функцию автосохранения. Когда вы меняете заголовок заметки или ее содержимое, через 2 секунды отключается функция противодействия, и если вы переключаетесь на текущую заметку до завершения обновления, она никогда не обновляется. Сообщите мне, если я плохо поработал с объяснением или есть что-то, что мне нужно уточнить, спасибо!

Вот видео, что происходит: https://www.loom.com/share/ef5188eec3304b94b05960f403703429

И это важные методы:

    updateNoteTitle(e) {
      this.noteData.title = e.target.innerText;
      this.debouncedUpdate();
    },
    updateNoteContent(e) {
      this.noteData.content = e;
      this.debouncedUpdate();
    },
    debouncedUpdate: debounce(function () {
      this.handleUpdateNote();
    }, 2000),
    async handleUpdateNote() {
      this.state = "loading";
      
      try {
        await usersCollection
          .doc(this.userId)
          .collection("notes")
          .doc(this.selectedNote.id)
          .update(this.noteData)
          .then(() => this.setStateToSaved());
      } catch (error) {
        this.state = "error";
        this.error = error;
      }
    },
    setStateToSaved() {
      this.state = "saved";
    },

Answer 1

Почему запускается каждые две секунды? И asyn c wait - действительно плохой подход в компоненте.

Для автосохранения заметки я рекомендую вам добавить eventListener при закрытии окна или при изменении события вкладки, как в предоставленном видео (независимо от того, событие подходит вам лучше всего)

created () {    
        window.addEventListener('beforeunload', this.updateNote)  
    }

Где ваша updateNote функция не асинхронная c.

Но если вы действительно хотите сэкономить на каждом изменении. Вы можете создать вычисляемое свойство, которое будет выглядеть так:

   note: {
      get() {
        return this.noteData.title;
      },
      set(value) {
        this.noteData.title = value;
        this.state= 'loading'
        usersCollection.doc(this.userId)
                       .collection("notes")
                       .doc(this.selectedNote.id)
                       .update(this.noteData)
                       .then(() => this.setStateToSaved());
      }
    },

И добавить v-model="note" к вашему входу. Представьте, что пользователь будет вводить 10 символов в секунду. Это 10 вызовов, означающих 10 сохранений

EDIT:

Добавьте свойство с именем isSaved. При изменении примечания нажмите if(isSaved === false) вызовите вашу функцию handleUpdateNote.

updateNoteTitle(e) {
  this.noteData.title = e.target.innerText;
  this.isSaved = false;
  this.debouncedUpdate();
}

и в вашей функции setStateToSaved добавить this.isSaved = true ; Я не знаю, является ли ваша боковая панель другим компонентом или нет. Если это так, и вы используете $emit для обработки изменения примечания, тогда используйте прослушиватель событий в сочетании со свойством isSaved.