State Management

Tools

• useSharedState: A lightweight wrapper around Vue reactivity that lets multiple pages and components share the same state.

Setup

No extra setup is needed. Call useSharedState() anywhere in your components.

1. Create shared state:
   vue

   <script setup>
   const sharedState = useSharedState();
   </script>
   

2. Update values:
   vue

   <script setup>
   const sharedState = useSharedState();
   sharedState.value.loading = true;
   </script>
   

3. Use it in your page:
   vue

   <template>
       <div>
           {{ sharedState.loading ? 'Loading...' : 'Ready' }}
       </div>
   </template>
   
   <script setup>
   const sharedState = useSharedState();
   </script>
   

How to use

• The same sharedState is shared across all pages and components
• If one page updates it, every other page sees the change
• Great for:
  • Loading states
  • User/session info
  • Data you don’t want to refetch on every page

Quick way to confirm it works

Open two pages in your app. Update sharedState on one page - the other page will update instantly.

Think of useSharedState like a shared notebook: When one page writes something in it, every other page can read it right away.