优化vuex后端全局数据加载

后端提供全局共享数据接口时，为提升应用性能，最佳实践是在实际需要数据时再发起请求获取。 避免使用简单的判断和dispatch方式，因为它会产生冗余代码。

高效解决方案

推荐如下简洁方案：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

// store:

export default {
  namespaced: true,
  state: {
    platformList: []
  },
  mutations: {
    setPlatformList(state, list) {
      state.platformList = list;
    }
  },
  actions: {
    async getPlatformList({ commit, state }) {
      if (state.platformList.length) {
        // 数据已存在，直接返回
        return state.platformList;
      }
      try {
        const { data } = await api.get('platform/list');
        commit('setPlatformList', data);
        return data;
      } catch (error) {
        throw error; // 将错误抛出，以便组件处理
      }
    }
  }
};

在组件中调用：

立即学习“前端免费学习笔记（深入）”；

// vue:

async mounted() {
  try {
    this.platformList = await this.$store.dispatch('platform/getPlatformList');
  } catch (error) {
    // 处理错误
    console.error("Failed to fetch platform list:", error);
  }
}

此方法确保在使用前获取数据，同时避免了不必要的代码重复，并使用async/await简化了异步操作的处理，并添加了错误处理机制。