Vue多组件独立获取Vuex用户数据时避免重复请求的解决方案

这个场景我太熟悉了——既要让每个组件保持独立的"黑盒"特性，自己管自己的数据获取，又要避免多个组件同时触发导致重复API请求，用Vue本身的特性+原生JavaScript就能搞定，完全不用RxJS。下面给你两个实用的方案：

方案一：在Vuex Action中控制请求并发 #

核心思路是在Vuex里维护请求的状态，让后续请求自动等待正在进行的请求完成，或者直接复用已有的数据。

步骤1：更新Vuex State #

先在你的store里添加几个状态字段，用来跟踪用户数据的请求状态：

// store/modules/user.js
const state = {
  userData: null,
  // 跟踪请求状态：idle/loading/success/error
  fetchStatus: 'idle',
  // 存储当前正在进行的请求Promise，供后续组件等待
  currentFetchPromise: null
}

步骤2：编写带并发控制的Action #

然后写一个处理用户数据获取的action，里面判断当前的请求状态，避免重复请求：

const actions = {
  async fetchUserData({ state, commit }) {
    // 如果正在请求中，直接返回当前的Promise，让组件等待
    if (state.fetchStatus === 'loading') {
      return state.currentFetchPromise
    }
    // 如果数据已经存在，直接返回数据
    if (state.fetchStatus === 'success') {
      return state.userData
    }

    // 标记为正在请求
    commit('SET_FETCH_STATUS', 'loading')
    
    // 发起API请求，把Promise存起来
    const fetchPromise = new Promise(async (resolve, reject) => {
      try {
        const response = await api.getUserData() // 替换成你的API调用
        commit('SET_USER_DATA', response.data)
        commit('SET_FETCH_STATUS', 'success')
        resolve(response.data)
      } catch (error) {
        commit('SET_FETCH_STATUS', 'error')
        reject(error)
      } finally {
        // 请求完成后清空Promise
        commit('SET_CURRENT_FETCH_PROMISE', null)
      }
    })

    commit('SET_CURRENT_FETCH_PROMISE', fetchPromise)
    return fetchPromise
  }
}

const mutations = {
  SET_USER_DATA(state, data) {
    state.userData = data
  },
  SET_FETCH_STATUS(state, status) {
    state.fetchStatus = status
  },
  SET_CURRENT_FETCH_PROMISE(state, promise) {
    state.currentFetchPromise = promise
  }
}

步骤3：组件中使用 #

你的insertToStore函数只需要dispatch这个action就行，每个组件还是独立调用：

// X/Y/Z组件中
async mounted() {
  try {
    await this.$store.dispatch('user/fetchUserData')
    // 数据已就绪，开始渲染逻辑
  } catch (error) {
    // 处理错误
  }
}

这样不管多少个组件同时调用这个action，只会发起一次API请求，其他组件都会自动等待请求完成后拿到数据，完美保持了组件的黑盒特性。

方案二：封装全局请求缓存工具 #

如果不想把请求逻辑和Vuex绑定得太紧，可以封装一个通用的缓存函数，利用Promise的特性来实现并发控制：

// utils/cachedFetcher.js
const cache = new Map()

export function createCachedFetcher(fetchFn, cacheKey) {
  return async () => {
    // 检查缓存中是否有已完成的数据
    if (cache.has(`${cacheKey}:data`)) {
      return cache.get(`${cacheKey}:data`)
    }
    // 检查是否有正在进行的请求
    if (cache.has(`${cacheKey}:promise`)) {
      return cache.get(`${cacheKey}:promise`)
    }

    // 发起请求并缓存Promise
    const fetchPromise = fetchFn().then(data => {
      cache.set(`${cacheKey}:data`, data)
      cache.delete(`${cacheKey}:promise`)
      return data
    }).catch(error => {
      cache.delete(`${cacheKey}:promise`)
      throw error
    })

    cache.set(`${cacheKey}:promise`, fetchPromise)
    return fetchPromise
  }
}

使用方式 #

先把你的API请求和Vuex更新逻辑封装成一个函数，再用这个工具包裹：

// store/modules/user.js
import { createCachedFetcher } from '@/utils/cachedFetcher'

async function fetchAndUpdateStore(store) {
  const response = await api.getUserData()
  store.commit('SET_USER_DATA', response.data)
  return response.data
}

// 创建带缓存的获取函数
const cachedFetchUser = createCachedFetcher(() => fetchAndUpdateStore(store), 'userData')

// 然后在action里调用这个函数
const actions = {
  async fetchUserData({ dispatch }) {
    return cachedFetchUser()
  }
}

组件里的调用方式和方案一完全一样，同样能实现只发一次请求，其他组件等待的效果。

这两个方案都能满足你的需求：组件完全独立，自己负责数据获取，底层自动处理重复请求的问题，不用引入任何额外库。

内容的提问来源于stack exchange，提问作者Jon Sud