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

【问题标题】：Javascript - Override function imported from another fileJavascript - 覆盖从另一个文件导入的函数
【发布时间】：2021-04-11 05:26:12
【问题描述】：

我有一个用于许多 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...')
}

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

【问题讨论】：

在这种情况下代理 API 有帮助吗？您可以在此处查看文档：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
@AbrarHossain 不幸的是没有，因为 Saver 不是一个对象......
但变量 saver 保存从您的函数 Saver 返回的值，该函数返回一个对象文字。所以我不明白这一点。

标签： javascript vuejs3 vue-composition-api

【解决方案1】：

问题似乎是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...')
  }

（注意valueref的使用）

【讨论】：