# 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`)

```typescript
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,
  };
};
```

---