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