State Management

Manage and share state across your frontend pages and components in ShipAhead using the built-in useSharedState composable.

Tools Used

• useSharedState: A simple wrapper around Vue’s reactivity system that lets different pages and components share the same state.

Setup & Configuration

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

1. Create Shared State:

   • Call useSharedState() to get a reactive state object you can use anywhere.
   • Example:
     vue

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

2. Update State:

   • Update values like normal JavaScript objects.
   • Example:
     vue

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

3. Use State in Templates:

   • Access shared values directly in your template.

   • Example:

     vue

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

Usage

• Global State: Values in sharedState are the same across all components and pages.
  For example, if one page sets sharedState.value.loading = true, every other page sees the update instantly.

• When to Use:

  • Track loading indicators
  • Store user session info
  • Share data across routes without re-fetching

• Verify State:
  Open two different routes (e.g., /about and /contact), update sharedState in one page, and see the other page update automatically.

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