Javascript - 覆盖从另一个文件导入的函数

问题描述

我有一个用于许多 VueJS 组件的 JS 文件，该文件具有以下结构：

export const saver = () => {
  const prepareData = () => {
    // Empty function that I want to override on components only when it is necessary
  }

  const save = () => {
    prepareData()

    /* Logic to save data */
  }

  return {
    save,prepareData
  }
}

export default saver

这是我在 Vue 组件上导入这个文件的方式：

<script>
import Saver from '@/utils/saver'
setup(props) {
  const saver = Saver()
  /** This is my approach so far....obvIoUsly is not working **/
  saver.prepareData = () => {
    console.log('It works!! Add here your extra logic...')
  }
  /***********************************************************/
  return {
    ...toRefs(saver)
  }
}
</script>

我正在使用新的组合 API，save 函数在模板中的按钮内调用：

<button @click="save()" type="submit">

我的目标是仅在需要在向后端提交数据之前添加一些额外逻辑的组件中覆盖函数 prepareData。到目前为止，我的方法是尝试像这样覆盖组件内部的函数（在我需要覆盖函数的 Vue 组件内部）：

saver.prepareData = () => {
  console.log('It works!! Add here your extra logic...')
}

有什么想法吗？？ :)) 提前致谢

解决方法

问题似乎是 Saver 类保留了内部 prepareData 方法。

我认为最简单的处理方式是在创建时传递函数

export const Saver = (prepareData) => {
  const save = () => {
    prepareData && prepareData()

    /* Logic to save data */
  }

  return {
    save
  }
}

export default Saver

缺点是调用 new Saver() 时需要准备好方法。

另一种选择是对 ref 方法使用 prepareData：

import { ref } from "vue"
export const saver = () => {
  const prepareData = ref(null)

  const save = () => {
    prepareData.value && prepareData.value()

    /* Logic to save data */
  }

  return {
    save,prepareData
  }
}

export default saver

那么你应该可以...

  saver.prepareData.value = () => {
    console.log('It works!! Add here your extra logic...')
  }

（注意 value 在涉及到 ref 时的使用）