Appearance

Store Documentation ​

Overview ​

The Vuex store manages application-wide state. The Admin Frontend uses a modular store structure with separate modules for different features.

Store Structure ​

store/
├── index.js           # Root store configuration
├── dam.js             # DAM module state
├── loading.js         # Global loading overlay state
└── analytics/         # Analytics state
    └── index.js

Store Modules ​

DAM Store ​

  • File: store/dam.js
  • Purpose: Digital Asset Management state

State:

  • Folder list
  • Asset list
  • DAM instance
  • Storage information
  • Download indicators
  • Upload queue
  • Notifications

Loading Store ​

  • File: store/loading.js
  • Purpose: Global loading overlay state used by startOverlay / stopOverlay root actions

State:

  • isLoading — global loading flag
  • loadingText — overlay message text
  • apiLongRunningCount — count of in-flight long-running API requests

Mutations: mutateLoading, mutateLoadingText, INCREMENT_API_LONG_RUNNING, DECREMENT_API_LONG_RUNNING

Getter: showApiLongRunningOverlay — true when apiLongRunningCount > 0

Analytics Store ​

  • File: store/analytics/index.js
  • Purpose: Analytics tracking state

State:

  • User agent and location
  • Email tracking
  • Event queue

Root Store ​

Actions ​

nuxtClientInit({ commit }, context) ​

Initializes client-side store:

  • Sets up authentication watchers
  • Handles storage synchronization
  • Manages cross-tab authentication

startOverlay(context, [isLoading, loadingText]) ​

Shows loading overlay.

Parameters:

  • isLoading (Boolean) - Show/hide overlay
  • loadingText (String) - Loading message

stopOverlay(context) ​

Hides loading overlay.

Accessing Store ​

In Components ​

javascript
// Getter
this.$store.getters['dam/folderList']

// Action
this.$store.dispatch('dam/fetchFolders', workspaceId)

// Mutation (avoid direct mutation)
this.$store.commit('dam/SET_FOLDER_LIST', folders)

In Middleware ​

javascript
export default function ({ store }) {
  const folders = store.getters['dam/folderList']
  await store.dispatch('dam/fetchFolders', workspaceId)
}

Store Best Practices ​

  1. Use Actions for Async: All async operations should use actions
  2. Mutations are Synchronous: Only mutations modify state
  3. Getters for Computed State: Use getters for derived state
  4. Module Namespacing: All modules are namespaced
  5. State Initialization: Initialize state with default values