Vue应用中数据结构化最佳实践：重复数据请求优化

是的，在更高层级统一获取数据是这类场景的最优解之一，同时也可以结合数据缓存方案来避免重复请求，具体分场景来看：

1. 高层级统一获取（适合全局共享且需强一致性的数据） #

如果多个视图共享同一个父容器（比如路由的布局组件、App.vue），或者这些视图属于同一路由分组，可以在父组件的mounted钩子或路由守卫中统一发起请求，再通过props将数据传递给各个子组件里的公共组件。

举个实际场景：假设你的多个页面都嵌套在MainLayout.vue中，就在这个布局组件里请求数据：

<!-- MainLayout.vue -->
<template>
  <div class="layout">
    <slot :commonData="commonData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commonData: null
    }
  },
  async mounted() {
    // 仅发起一次请求
    const res = await fetch('/api/shared-data')
    this.commonData = await res.json()
  }
}
</script>

然后在各个视图组件中，把数据传递给公共组件：

<!-- PageA.vue -->
<template>
  <MainLayout v-slot="{ commonData }">
    <CommonComponent :data="commonData" />
  </MainLayout>
</template>

这种方式的核心优势是：确保数据只请求一次，所有依赖组件共用同一份数据，完全避免重复请求，同时能保证数据的一致性。

2. 组件内缓存数据（适合灵活复用的公共组件） #

如果不想依赖父组件结构，或者公共组件可能在任意视图中被单独使用，可以在组件内部结合状态管理工具（Vuex/Pinia）做数据缓存，避免每次挂载都请求。

以Pinia为例，实现缓存逻辑：

// store/modules/sharedData.js
import { defineStore } from 'pinia'

export const useSharedDataStore = defineStore('sharedData', {
  state: () => ({
    data: null,
    isLoaded: false
  }),
  actions: {
    async fetchData() {
      // 已加载则直接返回，不重复请求
      if (this.isLoaded) return
      const res = await fetch('/api/shared-data')
      this.data = await res.json()
      this.isLoaded = true
    }
  }
})

然后在公共组件中调用：

<!-- CommonComponent.vue -->
<script>
import { useSharedDataStore } from '@/store/modules/sharedData'

export default {
  data() {
    return {
      displayData: null
    }
  },
  async mounted() {
    const store = useSharedDataStore()
    await store.fetchData()
    this.displayData = store.data
  }
}
</script>

这种方案的好处是组件无需依赖父组件传值，自身就能处理数据复用，适合数据更新频率低、需要灵活复用的场景。

3. 两种方案的选择依据 #

• 若数据是全局核心数据（比如用户信息、全局配置），优先用高层级统一获取+状态管理的方式，确保全应用数据一致。
• 若数据仅为公共组件专属共享数据，且组件可能在不同层级独立使用，用组件内结合状态管理的缓存方案更灵活。

额外注意事项 #

• 如果数据需要定时更新，可以在缓存逻辑中加入过期判断（比如记录请求时间，下次挂载时检查是否超过有效期）。
• 若路由切换会导致父组件重新渲染，状态管理缓存比父组件传值更可靠，不会因父组件重渲染重复请求。

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