MrDeer
MrDeer
Explore posts from servers
NNuxtRRailway
PostsComments
NNuxt
Created by MrDeer on 6/13/2024 in #❓・help
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) }
}
6 replies