How to use useState with functions inside

Hey, I have been trying to create a composable for a header, which contains all details about the header.

The issue I am facing is, that the useState composable cannot hold functions, otherwise I will get a cannot stringify a function during SSR.

What is the recommended workaround to a composable like this?

interface Header {
  title?: string
  back?: boolean
  secondary?: {
    icon: string
    to?: string
    click?: () => void
  }
  transparent?: boolean
}
export default function () {
  const state = useState<Header>('header', () => ({}))
  const setHeader = (header: Header) => {
    state.value = header
  }

  return { setHeader, header: readonly(state) }
}

interface Header {
  title?: string
  back?: boolean
  secondary?: {
    icon: string
    to?: string
    click?: () => void
  }
  transparent?: boolean
}
export default function () {
  const state = useState<Header>('header', () => ({}))
  const setHeader = (header: Header) => {
    state.value = header
  }

  return { setHeader, header: readonly(state) }
}

Nuxt•2y ago•

5 replies

MrDeer

How to use useState with functions inside

interface Header {
  title?: string
  back?: boolean
  secondary?: {
    icon: string
    to?: string
    click?: () => void
  }
  transparent?: boolean
}
export default function () {
  const state = useState<Header>('header', () => ({}))
  const setHeader = (header: Header) => {
    state.value = header
  }

  return { setHeader, header: readonly(state) }
}

interface Header {
  title?: string
  back?: boolean
  secondary?: {
    icon: string
    to?: string
    click?: () => void
  }
  transparent?: boolean
}
export default function () {
  const state = useState<Header>('header', () => ({}))
  const setHeader = (header: Header) => {
    state.value = header
  }

  return { setHeader, header: readonly(state) }
}

How to use useState with functions inside

Similar Threads

How to use useState with functions inside

Similar Threads

Similar Threads

Similar Threads