标签导航：

Vuex中如何按需加载后端全局数据？

优化vuex：高效加载后端全局数据

为了提升应用性能，建议采用按需加载策略，避免在Vuex中预先加载所有后端全局数据。本文提供一种高效的解决方案。

首先，在Vuex中创建一个模块来管理全局数据：

export default {
  namespaced: true,
  state: {
    globalData: null // 初始化为null，表示数据未加载
  },
  mutations: {
    SET_GLOBAL_DATA(state, data) {
      state.globalData = data;
    }
  },
  actions: {
    fetchGlobalData({ commit, state }) {
      return new Promise((resolve, reject) => {
        // 数据已存在则直接返回
        if (state.globalData !== null) {
          resolve(state.globalData);
          return;
        }

        // 从后端获取数据
        api.get('global-data').then(({ data }) => {
          commit('SET_GLOBAL_DATA', data);
          resolve(data);
        }).catch(reject);
      });
    }
  }
}

在Vue组件中，通过dispatch方法在需要时加载数据，例如在mounted生命周期钩子函数中：

mounted() {
  this.$store.dispatch('global-data/fetchGlobalData').then(data => {
    // 使用加载到的数据
    console.log(data);
  });
}

这种方法避免了不必要的初始数据加载，仅在组件需要时才获取数据，从而有效提升应用性能。 使用null作为初始状态，清晰地表明数据尚未加载。 SET_GLOBAL_DATA 突出了mutation的作用，更易于理解。