Vue 3 Composition API 无直接父子关联的SalesTable组件自动刷新最优方案

以下方案按适用范围和可维护性从高到低排序：

方案1：全局状态管理（Pinia/Vuex，最推荐，适配90%以上项目场景） #

通过全局共享的响应式状态做刷新触发器，完全解耦两个组件，符合Vue生态官方最佳实践：

• 实现步骤：
  1. 在全局状态库中新增响应式标记位，示例Pinia代码：

  // stores/sales.js
  export const useSalesStore = defineStore('sales', {
    state: () => ({
      salesTableRefreshFlag: false
    })
  })
  

  2. 在CreateSales.vue的新增API成功回调中翻转标记位：

  const salesStore = useSalesStore()
  // 接口请求成功后执行
  salesStore.salesTableRefreshFlag = !salesStore.salesTableRefreshFlag
  

  3. 在SalesTable.vue中监听标记位变化，触发数据拉取：

  const salesStore = useSalesStore()
  watch(() => salesStore.salesTableRefreshFlag, () => {
    // 调用组件内原有的表格数据拉取方法
    fetchSalesTableData()
  })
  

• 优势：无内存泄漏风险，支持跨页面场景，后续新增同类需求可直接复用逻辑，可维护性最高。

方案2：全局事件总线（mitt，适合小型轻量项目） #

不需要引入状态管理库，用全局事件中心做消息通知，实现成本极低：

• 实现步骤：
  1. Vue3项目先安装mitt依赖，在入口文件全局注册事件总线：

  // main.js
  import mitt from 'mitt'
  const app = createApp(App)
  app.config.globalProperties.$eventBus = mitt()
  

  Vue2项目可直接使用自带的Vue.prototype.$bus，无需额外安装依赖。
  2. 在CreateSales.vue的新增API成功回调中发送自定义事件：

  // 接口请求成功后执行
  this.$eventBus.emit('salesDataUpdated')
  // 组合式API可通过getCurrentInstance()获取全局实例调用
  

  3. 在SalesTable.vue中监听事件，触发拉取逻辑：

  onMounted(() => {
    this.$eventBus.on('salesDataUpdated', fetchSalesTableData)
  })
  onUnmounted(() => {
    // 组件销毁前必须解绑监听，避免内存泄漏
    this.$eventBus.off('salesDataUpdated', fetchSalesTableData)
  })
  

• 优势：逻辑轻量，不需要维护额外全局状态，适合小型工具类项目。

方案3：父组件中转（仅适用于两个组件同属Layout父级的场景） #

如果SalesTable.vue和CreateSales.vue都在同一个Layout.vue中渲染，可以直接用Layout作为中间层中转，不需要引入任何全局依赖：

• 实现步骤：
  1. 在Layout.vue中定义响应式变量，作为刷新标记传递给SalesTable.vue：

  <template>
    <CreateSales @refresh-table="refreshSalesTable = !refreshSalesTable" />
    <SalesTable :refresh-flag="refreshSalesTable" />
  </template>
  <script setup>
  const refreshSalesTable = ref(false)
  </script>
  

  2. 在CreateSales.vue的新增API成功回调中，emit事件通知父组件：

  // 接口请求成功后执行
  emit('refresh-table')
  

  3. 在SalesTable.vue中监听传入的refreshFlagprop，变化时触发数据拉取即可。
• 优势：实现成本最低，完全没有额外依赖，仅适用于两个组件有共同直接父级的场景。

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