Nuxt•2mo ago

How would you store a ref of an external packages in a state (useState)

I have this:

import { useChat } from '@ai-sdk/vue';
const { messages, handleSubmit } = useChat()

import { useChat } from '@ai-sdk/vue';
const { messages, handleSubmit } = useChat()

handleSubmit is a method and messages is a ref(). How can I wrap this in useState to be able to call handleSubmit and access messages from any component and keep the state alive on route change?

3 Replies

manniL•2mo ago

is it necessary to be useState? As in - do you render it on the server?

cosbgnOP•2mo ago

Not really, I only want the chat messages / methods etc available across multiple pages/components Currently I do:

const { chat_messages } = useSharedStore()
onBeforeUnmount(() => {
    chat_messages.value = messages
})
onBeforeMount(() => { 
    messages.value = chat_messages.value 
})

const { chat_messages } = useSharedStore()
onBeforeUnmount(() => {
    chat_messages.value = messages
})
onBeforeMount(() => { 
    messages.value = chat_messages.value 
})

But I should do it manually for each item and it's not ideal to keep all duplicated and synced. Ideally I would just have the messages directly in a store @manniL / TheAlexLichter But it's definitely only needed client side if that simplifies things

manniL•2mo ago

if it is client-only, then use a composable with a ref outside of the function. just make sure this is never called on the server

Gaming

Programming

How would you store a ref of an external packages in a state (useState)