在 Vue 3 设置中导入函数

Question

目前，我正在尝试在我的 Vue 组件中调用一个 throttle/debounce 函数，但每次它被调用时 Uncaught TypeError: functionTD is not a function 我都会抛出我的代码。

useThrottleDebounce.ts

import { debounce, throttle } from "lodash";
import { ref, watch } from "vue";

export const useThrottleDebounce = (tTime = 2000, dTime = 1000) => {
  const tRef = ref<any>(null);
  const tFunc = ref<any>(null);
  const tDHook = ref<any>(null);

  const debounceThrottle = debounce(() => {
    if (tRef.value) {
      tRef.value.cancel();
    }
    tRef.value = throttle(tFunc.value, tTime)();
  }, dTime);

  const throttleDebounceCreator = () => {
    return (func: any) => {
      tFunc.value = func;
      debounceThrottle();
    };
  };

  watch(() => tDHook.value, () => {
    tDHook.value = throttleDebounceCreator();
  });

  return tDHook;
};

export default useThrottleDebounce;

这是在我的组件setup中调用它的时候

setup(){
   // some code
   const functionTD = useThrottleDebounce(2000, 500);
   const inc = () => {      
      functionTD (() => {     
        count.value++; // here throw error
      });
    };
}

Answer 1

问题是 useThrottleDebounce 不是 return 函数，因此 functionTD 不是函数：

export const useThrottleDebounce = (tTime = 2000, dTime = 1000) => {
  // Maybe you want some private variables / functions here
  return () => {
    // This will be `functionTD` in `setup`
  }
}

在 Vue 3 设置中导入函数

Importing a function in Vue 3 setup

javascript

typescript

vue.js

vue-component

vuejs3