Objective: Global Workspace Selector Synchronization

Implement a global workspace selection dropdown in the application header. When the selection changes in the header, all dependent sub-components must instantly reflect the updated selection and refresh their data.

1. Initializing the Store with Workspace Data

Triggering the data fetch

// Dispatch action to load available workspaces
store.dispatch('fetchWorkspaces').then(() => {});

Vuex Module: workspace.js

import { retrieveWorkspaceCatalog } from '@/api/workspaceApi';

const workspaceModule = {
  namespaced: true,
  state: {
    workspaceOptions: [],
    activeWorkspaceId: null,
  },
  mutations: {
    INITIALIZE_WORKSPACES(state, payload) {
      state.workspaceOptions = payload;
    },
    UPDATE_ACTIVE_WORKSPACE(state, id) {
      state.activeWorkspaceId = id;
    },
  },
  actions: {
    fetchWorkspaces({ commit }) {
      return new Promise((resolve, reject) => {
        retrieveWorkspaceCatalog()
          .then((response) => {
            const records = response.data;
            if (records.length) {
              const formattedOptions = records.map((record) => ({
                uid: record.id,
                displayName: record.name,
              }));
              commit('INITIALIZE_WORKSPACES', formattedOptions);
              commit('UPDATE_ACTIVE_WORKSPACE', formattedOptions[0].uid);
            }
            resolve(response);
          })
          .catch(reject);
      });
    },
    setActiveWorkspace({ commit }, newId) {
      commit('UPDATE_ACTIVE_WORKSPACE', newId);
    },
  },
};

export default workspaceModule;

2. Header Component Implementation

Template

<el-select v-model="currentWorkspace" filterable placeholder="Select Workspace">
  <el-option 
    v-for="opt in availableWorkspaces" 
    :key="opt.uid" 
    :label="opt.displayName" 
    :value="opt.uid" />
</el-select>

Script

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState('workspaceModule', ['workspaceOptions']),
    availableWorkspaces() {
      return this.workspaceOptions;
    },
    currentWorkspace: {
      get() {
        return this.$store.state.workspaceModule.activeWorkspaceId;
      },
      set(newVal) {
        this.$store.dispatch('workspaceModule/setActiveWorkspace', newVal);
      },
    },
  },
};

3. Sub-component Integration

Template

<el-form-item label="Workspace" prop="workspaceUid">
  <el-select 
    v-model="filterCriteria.workspaceUid" 
    filterable 
    clearable 
    @change="fetchRecords">
    <el-option 
      v-for="opt in availableWorkspaces" 
      :key="opt.uid" 
      :label="opt.displayName" 
      :value="opt.uid" />
  </el-select>
</el-form-item>

Script

import { mapState } from 'vuex';

export default {
  data() {
    return {
      filterCriteria: {
        workspaceUid: null,
      },
    };
  },
  computed: {
    ...mapState('workspaceModule', ['activeWorkspaceId', 'workspaceOptions']),
    availableWorkspaces() {
      return this.workspaceOptions;
    },
  },
  watch: {
    activeWorkspaceId(updatedId) {
      this.filterCriteria.workspaceUid = updatedId;
      this.fetchRecords();
    },
  },
  created() {
    this.filterCriteria.workspaceUid = this.activeWorkspaceId;
    this.fetchRecords();
  },
};