我有一个处理API通信的服务（应该是唯一做实际API调用的文件）。我在我的商店里使用这个服务有一些问题。
我现在的逻辑是这样的：
为了交换服务以获得更好的可测试性，服务通过一个prop引入到Vue组件中。我的问题是，我找不到一个好的方法来告诉商店使用这个服务，所以我创建了一个可组合的useService来"存储"服务，然后可以导入并在商店中使用。

// component.vue
const props = defineProps<{
  service: ServiceInterface
}>()

// Get the composable and set the service
const actualService = useService()
actualService.setService(props.service)

// Use the store
const store = useStore()

// useService.ts
const service = ref<ServiceInterface>()

export const useService = () => {
  const setService = (newService: ServiceInterface) => {
    service.value = newService
  }

  return {
    service,
    setService
  }
}

// useStore.ts

// import composable
const { service } = useService()

export const useStore = defineStore('storeName', {
  actions: {
    async fetchData(id: string) {
      // Ensure service is set
      if (!service.value) {
        throw new Error('No service')
      }

      // Use service
      service.value.getData(id)
    }
  }
})

这个设置确实有效，但是我需要仔细检查服务可用的每个方法，我觉得我把整个设置弄得过于复杂了。有人有什么想法来改进这个流程吗？
我想我正在寻找这样的东西（不工作）：

export const useStore = (service: ServiceInterface) => {
  return defineStore('storeName', {
    actions: {
      async fetchData(id: string) {
        service.getData(id)
      }
    }
  })
}