Skip to content

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 ​

ActionEffect
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 calls Object.assign() on a fresh object, so it does not update scrollTo / 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
    }
  }
})