用vue实现mvc
Vue 实现 MVC 模式
Vue 本身是一个 MVVM（Model-View-ViewModel）框架，但可以通过合理的架构设计实现 MVC（Model-View-Controller）模式。以下是具体实现方法：
目录结构设计
src/
├── controllers/ # 控制器
├── models/ # 数据模型
├── views/ # 视图组件
├── services/ # 服务层（可选）
└── router/ # 路由配置Model 层实现
模型层负责数据管理和业务逻辑，通常使用 Vuex 或 Pinia 管理状态：
// models/UserModel.js
export default {
state: () => ({
users: []
}),
mutations: {
SET_USERS(state, users) {
state.users = users
}
},
actions: {
async fetchUsers({ commit }) {
const res = await api.getUsers()
commit('SET_USERS', res.data)
}
}
}View 层实现
视图层由 Vue 组件构成，只负责展示数据：
<!-- views/UserList.vue -->
<template>
<div>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
computed: {
users() {
return this.$store.state.user.users
}
}
}
</script>Controller 层实现
控制器层处理用户输入和业务逻辑协调：
// controllers/UserController.js
export default {
methods: {
async loadUsers() {
try {
await this.$store.dispatch('user/fetchUsers')
} catch (error) {
console.error('加载用户失败', error)
}
},
handleUserClick(userId) {
this.$router.push(`/users/${userId}`)
}
}
}集成方式
在组件中混合控制器逻辑：
<script>
import UserController from '@/controllers/UserController'
export default {
mixins: [UserController],
created() {
this.loadUsers()
}
}
</script>路由配置
通过路由实现前端控制器模式：
// router/index.js
{
path: '/users',
component: UserList,
meta: {
controller: 'UserController'
}
}注意事项
- 保持视图层无业务逻辑
- 控制器不应直接操作 DOM
- 模型层保持纯数据操作
- 对于复杂应用可引入服务层处理 API 调用
这种架构下，Vue 组件主要作为 View 层，Vuex/Pinia 作为 Model 层，控制器处理应用逻辑，实现关注点分离。
