Vuex中如何实现跨模块API特性标志的懒加载

1. 定义共享模块（如sharedModule） #

专门负责特性标志的加载、缓存与状态管理，完全遵循Vuex的state/actions/mutations规范：

// store/modules/sharedModule.js
export default {
  state: {
    // 存储实际的特性标志值
    featureFlag: null,
    // 标记是否正在加载，避免重复发起请求
    isLoading: false,
    // 标记是否已加载完成，后续直接用缓存值
    hasLoaded: false
  },
  mutations: {
    SET_FEATURE_FLAG(state, value) {
      state.featureFlag = value;
      state.hasLoaded = true;
      state.isLoading = false;
    },
    SET_LOADING(state, status) {
      state.isLoading = status;
    }
  },
  actions: {
    async fetchFeatureFlag({ state, commit }) {
      // 已加载或正在加载时，直接返回避免重复请求
      if (state.hasLoaded || state.isLoading) return;

      commit('SET_LOADING', true);
      try {
        // 替换为你的实际API请求逻辑
        const response = await fetch('/api/feature-flag');
        const data = await response.json();
        commit('SET_FEATURE_FLAG', data.isEnabled);
      } catch (error) {
        console.error('加载特性标志失败:', error);
        // 加载失败时可设置默认值
        commit('SET_FEATURE_FLAG', false);
      }
    }
  },
  getters: {
    // 给其他模块提供统一的取值入口
    featureFlag: (state) => state.featureFlag
  }
};

2. 在其他业务模块中使用 #

其他模块只需先触发共享模块的加载动作，确保值已就绪后再获取使用：

// store/modules/otherModule.js
export default {
  actions: {
    async method1({ dispatch, rootGetters }) {
      // 触发加载动作（仅第一次会发起API请求）
      await dispatch('sharedModule/fetchFeatureFlag', null, { root: true });
      // 获取缓存后的特性标志值
      const lazyLoadedValue = rootGetters['sharedModule/featureFlag'];
      
      // 后续业务逻辑
      if (lazyLoadedValue) {
        // 特性开启时的操作
      } else {
        // 特性关闭时的操作
      }
    }
  }
};

3. 可选优化：封装复用函数 #

如果多个模块都需要调用，可封装辅助函数简化代码：

// store/utils.js
export async function getFeatureFlag(store) {
  await store.dispatch('sharedModule/fetchFeatureFlag');
  return store.getters['sharedModule/featureFlag'];
}

在业务模块中使用：

// store/modules/otherModule.js
import { getFeatureFlag } from '../utils';

export default {
  actions: {
    async method1({ rootStore }) {
      const lazyLoadedValue = await getFeatureFlag(rootStore);
      // 业务逻辑...
    }
  }
};

方案符合Vuex风格的原因 #

• 状态统一管理：共享值单独存放在专属模块，符合单一职责原则
• 异步逻辑规范：API请求放在action中处理，mutation仅做同步状态更新
• 避免重复请求：通过isLoading和hasLoaded状态精准控制请求时机
• 依赖关系清晰：业务模块明确依赖共享模块的动作与getter，逻辑可追踪

内容的提问来源于stack exchange，提问作者Eddi