41 lines
1.1 KiB
Markdown
41 lines
1.1 KiB
Markdown
# 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,
|
|
};
|
|
};
|
|
```
|
|
|
|
---
|