面试题：Vue项目中Fetch API与状态管理（如Vuex）结合使用时的最佳实践

1. 管理请求状态

在Vuex的state中定义请求状态相关的属性，如loading、success、error。在mutation中定义修改这些状态的方法。

// store.js
const state = {
  apiLoading: false,
  apiSuccess: false,
  apiError: null
};

const mutations = {
  SET_LOADING(state, payload) {
    state.apiLoading = payload;
  },
  SET_SUCCESS(state, payload) {
    state.apiSuccess = payload;
    state.apiError = null;
  },
  SET_ERROR(state, payload) {
    state.apiError = payload;
    state.apiSuccess = false;
  }
};

const actions = {
  async fetchData({ commit }) {
    commit('SET_LOADING', true);
    try {
      const response = await fetch('your-api-url');
      const data = await response.json();
      commit('SET_SUCCESS', true);
      // 处理数据，例如提交到另一个mutation保存数据
      return data;
    } catch (error) {
      commit('SET_ERROR', error.message);
    } finally {
      commit('SET_LOADING', false);
    }
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions
});

SET_LOADING：在请求开始时设置apiLoading为true，请求结束时设置为false。
SET_SUCCESS：请求成功时设置apiSuccess为true并清除apiError。
SET_ERROR：请求失败时设置apiError并将apiSuccess设为false。

2. 处理不同模块的请求数据共享

可以将共享数据放在Vuex的根状态中，不同模块通过mapState辅助函数获取。

// moduleA.js
const state = {
  localData: null
};

const mutations = {
  SET_LOCAL_DATA(state, payload) {
    state.localData = payload;
  }
};

const actions = {
  async fetchSharedData({ commit, rootState }) {
    if (rootState.sharedData) {
      // 如果根状态中已有数据，直接使用
      commit('SET_LOCAL_DATA', rootState.sharedData);
      return;
    }
    const response = await fetch('shared-api-url');
    const data = await response.json();
    // 保存到根状态
    commit('SET_LOCAL_DATA', data);
    // 假设根状态有对应的mutation保存共享数据
    this.commit('rootModule/SET_SHARED_DATA', data, { root: true });
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};

首先检查根状态中是否已有共享数据，若有则直接使用。
若没有则发起请求，获取数据后不仅保存到本模块状态，也保存到根状态，以便其他模块使用。

3. 优化重复请求

可以使用一个缓存对象来记录已请求的数据。在发起请求前检查缓存中是否已有数据，如果有则直接使用。

// store.js
const state = {
  apiCache: {}
};

const mutations = {
  SET_CACHE(state, { key, data }) {
    state.apiCache[key] = data;
  }
};

const actions = {
  async fetchData({ commit, state }, apiUrl) {
    if (state.apiCache[apiUrl]) {
      return state.apiCache[apiUrl];
    }
    const response = await fetch(apiUrl);
    const data = await response.json();
    commit('SET_CACHE', { key: apiUrl, data });
    return data;
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions
});

在fetchData行动中，先检查apiCache中是否有对应apiUrl的数据。
如果有则直接返回缓存数据，没有则发起请求，获取数据后存入缓存。

星途面试题库

面试题：Vue项目中Fetch API与状态管理（如Vuex）结合使用时的最佳实践

知识考点

面试题答案

1. 管理请求状态

2. 处理不同模块的请求数据共享

3. 优化重复请求