Vuex按需加载全局数据技巧

本文探讨Vuex中优雅加载后端全局数据的最佳实践。传统方法通过简单的判断和dispatch方式加载数据，容易产生冗余代码。文章推荐了一种高效方案：在Vuex的`actions`中，先检查状态中是否存在数据，若存在则直接返回，否则再发起API请求获取数据并提交mutation更新状态。该方案利用`async/await`简化异步操作，并包含错误处理机制，确保在需要时按需加载数据，提升应用性能，避免代码冗余，最终实现Vuex全局数据的优雅加载。

优化Vuex后端全局数据加载

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

高效解决方案

推荐如下简洁方案：

// 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简化了异步操作的处理，并添加了错误处理机制。

好了，本文到此结束，带大家了解了《Vuex按需加载全局数据技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！