Nuxt•2y ago

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) }
}

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) }
}

handshake•6/13/24, 8:11 PM

idk where you're storing the composable but is it structured like this? https://github.com/snolan-ethika/nuxt-stuff/commit/96b0bc24e68c00b9bac4e11402c3b5c19668a348

MrDeerOP•6/14/24, 10:24 PM

of course, try setting click to function and render it on ssr. it will fail, because useState cant hold functions in state

handshake•6/14/24, 11:08 PM

do you mean like this?

MrDeerOP•6/17/24, 5:03 PM

Like this for example:

setHeader({
  secondary: {
    click: () => navigateTo('/');
  }
})

setHeader({
  secondary: {
    click: () => navigateTo('/');
  }
})

handshake•6/17/24, 5:20 PM

is that a nuxt thing?

How to use useState with functions inside

Similar Threads

Similar Threads

Similar Threads