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

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

要自动保存便笺，我建议您在关闭窗口或更改选项卡事件时添加一个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中自动保存数据时遇到问题，当我更改当前注释时自动保存未完成

1 个答案: