SYSTEM/docs/architecture/state-management.md

5. State Management

• Approach: For the MVP, we will rely primarily on Nuxt's built-in useState composable for simple, shared, server-side-renderable state. This is the most lightweight and idiomatic approach for Nuxt 4. We will avoid installing a heavy external library like Pinia or Vuex until the application's complexity demonstrably requires it.
• Structure: Shared state composables will be located in the app/composables/ directory.

State Management Template (app/composables/useSomeState.ts)

import { useState } from '#app';

// Example: Managing the current Citizen's session info
interface CitizenSession {
  name: string;
  publicKey: string;
  // NOTE: The private key should NOT be stored in a composable.
  // It should be managed in a more secure, non-persistent way.
}

export const useCitizenStore = () => {
  const citizen = useState<CitizenSession | null>('citizen', () => null);

  const setCitizen = (newCitizen: CitizenSession) => {
    citizen.value = newCitizen;
  };

  const clearCitizen = () => {
    citizen.value = null;
  };



  return {
    citizen,
    setCitizen,
    clearCitizen,
  };
};

---