我在 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

为什么运行每两秒一次？异步等待在组件中是一种非常糟糕的方法。

要自动保存笔记，我建议您在 window 关闭或更改选项卡事件时添加一个 eventListener，就像提供的视频中一样（任何最适合您的事件）

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

您的 updateNote 函数不是异步的。

但是如果你真的想节省每次更改。您可以计算出如下所示的属性：

   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 次保存

编辑：

添加一个名为 isSaved 的属性。在注释更改上单击 if(isSaved === false) 调用您的 handleUpdateNote 函数。

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

并在您的函数 setStateToSaved 中添加 this.isSaved = true ; 我不知道你的侧边栏是否是一个不同的组件。如果是，并且您正在使用 $emit 来处理 Note 更改，则使用事件侦听器结合 isSaved 属性.

我在 VueJS 中自动保存数据时遇到问题，当我更改当前注释时自动保存没有完成

I have a problem with autosaving data in VueJS, the autosave doesn't complete when I change the current note

autosave

firebase

vue.js

google-cloud-firestore