N
Nuxt•4mo ago
cosbgn

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
manniL•4mo ago
is it necessary to be useState? As in - do you render it on the server?
cosbgn
cosbgnOP•4mo 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
manniL•4mo 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

Did you find this page helpful?