Vue组合式函数：如何创建不共享状态的多实例组合式函数？

嘿，我来帮你搞定这个问题！先理清楚你遇到的两个现象：

1. 调用getDocuments会执行两次：这其实是因为你的两个子组件都在onMounted钩子里调用了这个方法，每个组件挂载时都会触发一次，属于正常情况——如果你想避免重复请求，后面我会给你一个优化方案。
2. 修改table.someValue后两个组件同步变化：这才是核心问题，说明你的组合式函数里的响应式状态被所有组件共享了。大概率是你不小心把table这个ref定义在了组合式函数的外面，导致所有组件调用useDatatable时拿到的都是同一个状态实例。

核心解决方案：让状态在组合式函数内部“私有化” #

要让每个组件调用useDatatable时拿到完全独立的状态，只需要保证响应式状态（比如table）是在组合式函数内部创建的。这样每次调用函数，都会生成一个全新的状态对象，各个组件之间的状态就不会互相干扰了。

修正后的组合式函数代码：

// 正确的写法：每次调用都会生成独立的状态实例
export function useDatatable () {
  // 这里的table是每次调用函数时新建的ref，完全独立
  const table = ref({ 
    headers: [...], // 如果这里的数组是内部创建的，也会是独立的
    items: [], 
    someValue: '' 
  })

  async function getDocuments () {
    const { data } = await $axios.get('/documents')
    table.value.items = data
  }

  return { table, getDocuments }
}

为什么原来的代码会共享状态？ #

如果你的原始代码是下面这种错误写法（把table放在了函数外面），那所有组件调用useDatatable时都会复用同一个ref实例，自然会出现状态同步的问题：

// ❌ 错误示例：状态定义在函数外部，导致全局共享
const table = ref({ headers: [...], items: [], someValue: '' })

export function useDatatable () {
  async function getDocuments () {
    const { data } = await $axios.get('/documents')
    table.value.items = data
  }

  return { table, getDocuments }
}

额外优化：避免重复请求（可选） #

如果你不想让两个组件各自发起API请求，可以把状态提升到父组件，然后通过props传递给子组件，这样只需要发起一次请求：

<!-- 父组件代码 -->
<template>
  <div>
    <document-table :table="table" :get-documents="getDocuments" />
    <document-billing-dialog :table="table" :get-documents="getDocuments" />
  </div>
</template>

<script>
import { useDatatable } from '~/composables/useDatatable'
export default defineComponent({
  setup () {
    const { table, getDocuments } = useDatatable()
    
    // 父组件只调用一次请求
    onMounted(() => {
      getDocuments()
    })

    return { table, getDocuments }
  }
})
</script>

这样父组件统一管理状态和请求，子组件只负责渲染，既能避免重复请求，也能实现状态共享；而如果你需要完全独立的组件状态，就用前面的核心方案即可。

内容的提问来源于stack exchange，提问作者Marcelo The Mage Coder