Vuejs, вычисляемое свойство с компонентом замораживания установщика

Question

У меня есть компонент с текстовым редактором tiptap. Я использую вычисляемое свойство с сеттером для привязки данных к редактору.

<template>
  <tiptap model="editNoteContent" extensions" />
</template>

<script>
export default {
  computed: {
    editNoteContent: {
      get() {
        return this.$store.state.Notes.currentNote.text;
      },
      set(text) {
        this.$store.commit("Notes/updateCurrentNoteText", text);
      },
    }
  },
}
</script>

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

Answer 1

Распространенным решением проблемы этого типа является отклонение вызова, что задерживает событие обратного вызова. Например, вы можете отразить мутацию, используя clearTimeout() чтобы отменить все ожидающие звонки, а затем setTimeout() отложить $store.commit() вызов:

export default {
  computed: {
    editNoteContent: {
      get() { /*...*/ },
      set(text) {
        // cancel pending commits, if any
        clearTimeout(this._timer)

        // commit newest text after 300ms
        this._timer = setTimeout(() => {
          this.$store.commit("Notes/updateCurrentNoteText", text)
        }, 300)
      }
    }
  }
}