27 lines
1.3 KiB
Plaintext
27 lines
1.3 KiB
Plaintext
# Responsive layout vs data fetching
|
|
|
|
When adding or changing pages with mobile/desktop views:
|
|
|
|
## UI layer (responsive)
|
|
|
|
- Switch layouts with **`v-show`**, not **`v-if`**, so resize does not destroy child components.
|
|
- Prefer `ResponsiveViewPair` (`src/layouts/components/ResponsiveViewPair.vue`) or the home shell pattern.
|
|
- Keep **`<router-view>`** outside responsive chrome wrappers (header/topbar only in chrome components).
|
|
- Modal vs ActionSheet may use `v-if` by breakpoint; they must not own initial page data fetching.
|
|
|
|
## Data layer (fetch once)
|
|
|
|
- Call the page composable **once** in the route `index.vue` shell (e.g. `useXPage()` / `useXPageProvider()`).
|
|
- Put `onMounted` API calls only in that shell composable, never in `mobile/*` or `desktop/*` views.
|
|
- Mobile/Desktop views use **`useXPageContext()`** (provide/inject) — read-only UI.
|
|
- Do not call APIs inside `useDesktopBreakpoint()` watchers.
|
|
|
|
## Shared caches
|
|
|
|
- Use `runOnceAsync` (`src/composables/useOnceAsync.ts`) for store-level dedup when the same endpoint may be hit from multiple mounts.
|
|
- Reuse existing module caches (`useWalletAssets`, Pinia stores) before adding new fetch logic.
|
|
|
|
## Verify
|
|
|
|
- Open Network tab, load a page, resize across 768px — **no duplicate requests** for the same endpoint.
|