4. Store

STORE

4.1. State Management Architecture

The application uses Vuex for centralized state management, providing predictable state mutations and improved component communication.

4.2. Core Store Structure

Main Store (store/index.js):

• Application-wide content state

• Current page content management

• Chart loading states

Model Store Module (store/model.js):

• 3D model configuration and states

• Rendering and performance settings

• Color mapping and visualization controls

• Loading and error state management

• Waveform data synchronization

4.3. Key Features

• Centralized State: All 3D model states managed in dedicated module

• Reactive Updates: Automatic component synchronization via getters

• Error Handling: Unified error state management across components

• Performance Optimization: Efficient state updates and minimal re-renders

4.4. State Management Benefits

1. Predictable Data Flow: Single source of truth for all model states

2. Component Decoupling: Reduced prop drilling and event bubbling

3. Developer Experience: Better debugging with Vue DevTools integration

4. Maintainability: Clear separation of concerns and modular architecture

4.5. Usage Pattern

Components access state through mapGetters and update via mapActions:

// Component integration
computed: {
  ...mapGetters('model', ['getModelStates', 'isModelReady'])
},

methods: {
  ...mapActions('model', ['updateColorMapping', 'loadModel'])
}

This architecture ensures efficient state synchronization between complex 3D model components and UI controls.