javascript - Vue JS - 让函数中的条件更高效

Question

我觉得可以缩短此功能，但我不确定最好的方法是什么。我想让以下功能更有效。对你的帮助表示感谢。

我的功能

onStudentActionSelect: function () {
      if (this.selectedRows.length === 1) {
        this.$store.commit(SET_MODAL_OPTIONS, {
          modalContent: MODAL_CONTENT.DELETE_STUDENT(this.selectedRows[0].name),
          modalSettings: MODAL_SETTINGS.CANCEL_DELETE,
          modalCallback: this.deleteStudent
        })
      } else if (this.selectedRows.length > 1) {
        this.$store.commit(SET_MODAL_OPTIONS, {
          modalContent: MODAL_CONTENT.DELETE_STUDENTS(this.selectedRows.length),
          modalSettings: MODAL_SETTINGS.CANCEL_DELETE,
          modalCallback: this.deleteStudents
        })
      }
    }

标签： javascriptperformancefunctionvue.jsvuejs2

Answer 1

唯一改变的是您的模式的内容，因此您可以在提交到商店之前确定这一点。像这样简化代码通常涉及确定保持不变的部分，并在变量/参数中准备其余部分。

onStudentActionSelect: function () {
  // Do nothing if we have nothing selected
  if (!this.selectedRows.length) {
    return;
  }

  const modalContent = this.selectedRows.length === 1 ? MODAL_CONTENT.DELETE_STUDENT(this.selectedRows[0].name) : MODAL_CONTENT.DELETE_STUDENTS(this.selectedRows.length);

  this.$store.commit(SET_MODAL_OPTIONS, {
    modalContent,
    modalSettings: MODAL_SETTINGS.CANCEL_DELETE,
    modalCallback: this.deleteStudent
  })
}