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
├── analytics/         # Analytics state
│   └── index.js
├── box/               # Box.com integration state
│   └── index.js
├── drive/             # Google Drive state
│   └── index.js
└── dropbox/           # Dropbox 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

Analytics Store ​

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

State:

  • User agent and location
  • Email tracking
  • Event queue

Drive Store ​

  • File: store/drive/index.js
  • Purpose: Google Drive integration state

State:

  • Authentication tokens
  • File list
  • Upload status

Dropbox Store ​

  • File: store/dropbox/index.js
  • Purpose: Dropbox integration state

State:

  • Authentication tokens
  • File list
  • Upload status

Box Store ​

  • File: store/box/index.js
  • Purpose: Box.com integration state

State:

  • Authentication tokens
  • File list
  • Upload status

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