Appearance
App Data Store ​
File Information ​
- Path:
app/stores/appData.ts - Store id:
appData(Pinia setup store,useAppDataStore()) - Purpose: UI-level app state (brand, logo, sidebar, dashboard snapshots) and brand lookup by domain
Overview ​
The store no longer fetches dashboard, tile, banner or folder data. Server state lives in TanStack Query (useAppDataQueries().useDashboardData(), useTiles(), useBanners(), useFolders()), and components push results into the store through the set* setters so older computed properties keep working. The one network action left is fetchBrandDetails(), which resolves the brand for the current host.
State ​
typescript
{
bannerData: Banner[] // [] - filled by setBannerData
tileData: Tile[] // [] - filled by setTileData
dashboardData: DashboardData|null // null - filled by setDashboardData
folders: any[] // [] - filled by setFolders
leftMenuOpen: boolean // false
scrollTo: string // ""
scrollToRecent: boolean // false
logo: string // "" - set by fetchBrandDetails / assignLogo
brand: any | null // null - verify-domain payload
subscriptionFeatures: any // {}
}Actions ​
fetchBrandDetails ​
typescript
const brand = await appDataStore.fetchBrandDetails(brandName)Resolves which identifier to send to POST verify-domain (useAppDataApi().verifyDomain, sent with skipAuth: true as { url: <identifier> }):
isMainAppHost() and hostWithoutPort() come from app/constants/domains.ts (MAIN_APP_HOSTS, matched with and without the port). Before c5704db the store always sent the route's brand_name, so on a custom domain the lookup used the path segment instead of the host. Errors from verifyDomain are rethrown; callers such as app/error.vue wrap the call in try/catch.
Callers on origin/development: app/error.vue, app/layouts/collage-layout.vue, app/layouts/login-layout.vue, app/pages/[brand_name]/generate-password.vue, app/pages/[brand_name]/login.vue.
Setters ​
| Action | Effect |
|---|---|
setBannerData(data) | bannerData = data |
setTileData(data) | tileData = data |
setDashboardData(data) | dashboardData = data |
setFolders(data) | folders = data |
assignLogo(newLogo) | logo = newLogo |
brandDetails(newBrand) | brand = newBrand |
setSubscriptionFeatures(features) | subscriptionFeatures = features |
setLeftMenuState(isOpen) | leftMenuOpen = isOpen |
Other actions ​
changeScrolling({ scrollingState, scrollTo })- currently callsObject.assign()on a fresh object, so it does not updatescrollTo/scrollToRecent.fetchOrderAlertList()- empty placeholder.
Caching ​
The store does no caching of its own. Cache lifetime for dashboard, tiles, banners and folders is controlled by the TanStack Query hooks (see TanStack Query).
Usage Example ​
typescript
const appDataStore = useAppDataStore()
const route = useRoute()
onMounted(async () => {
if (!appDataStore.brand) {
try {
await appDataStore.fetchBrandDetails(route.params.brand_name as string)
} catch {
// verify-domain failed; render without brand data
}
}
})