Clean Architecture 中 Vue 组件该怎么放？

兴敏酱~ 提问于 2026-03-10 18:08:26 阅读 2

框架

我最近在用 Vue 3 + TypeScript 搭一个 Clean Architecture 的项目，但卡在了组件的目录结构上。按照 Clean Architecture 的分层，UI 层应该只负责展示，不能包含业务逻辑。但我现在把 Vue 组件直接放在了 presentation 目录下，结果发现组件里还是得调用 useCase，感觉有点混乱。

比如下面这个登录组件，它直接依赖了 LoginUseCase，这样是不是违反了分层原则？有没有更干净的组织方式？

<script setup lang="ts">
import { LoginUseCase } from '@/core/usecases/LoginUseCase'
import { ref } from 'vue'

const email = ref('')
const password = ref('')

const handleLogin = async () => {
  await new LoginUseCase().execute(email.value, password.value)
}
</script>

<template>
  <form @submit.prevent="handleLogin">
    <input v-model="email" type="email" />
    <input v-model="password" type="password" />
    <button type="submit">登录</button>
  </form>
</template>

我来解答赞 0 收藏

反馈

1 条解答

Air-恩贝 Lv1

把 useCase 从组件里抽出来，通过依赖注入的方式传入。组件只负责 UI 展示，业务逻辑交给 Presenter 或 ViewModel。

// presentation/presenters/LoginPresenter.ts

export class LoginPresenter {

  constructor(private loginUseCase: LoginUseCase) {}

  

  async login(email: string, password: string) {

    return await this.loginUseCase.execute(email, password)

  }

}



// presentation/views/LoginView.vue

更讲究的做法是把 presenter 也作为依赖注入进去，组件完全不知道 useCase 的存在。

2026-03-10 18:09