[Vuejs]-In Vue 3 hook, in the return type object inside `this` is always `undefined`

by

3👍

✅

Assuming that function is in a module, this is automatically bound to undefined by Babel, leading to the errors you observed.

To get your code to work, disposer needs to be declared beforehand (like you’ve done with save()):

export const useAutoSave = (
  cacheKey: string,
  interval: number,
  getSaveData: () => Omit<SaveDto, 'savedTime'>,
) => {
  let timer: any

  const disposer = () => {
    clearInterval(timer)
  }

  return {
    //...
    track() {
      disposer()
      timer = setInterval(save, interval)
    },
    disposer,
  }
}
👤tony19

0👍

Please refer to functional components migration guide and Vue 3 functional components documentation.

You should pass props and context as arguments to the functional component.

const FunctionalComponent = (props, context) => {
  // ...
}
👤Mayank Kumar Chaudhari

Leave a comment