Vue 3 SFC 轻松构建 TodoMVC 应用：组件化与业务逻辑分离之美

前端

2023-10-07 19:26:05

组件化与业务逻辑分离的艺术

组件化和业务逻辑分离是构建现代化应用程序的两个关键原则。它们可以帮助开发人员创建更具可维护性、可读性和可复用性的代码。

在组件化方面，Vue 3 SFC 允许开发人员将应用程序分解为更小的、可重用的组件。每个组件都有自己的模板和脚本，可以独立于其他组件进行开发和测试。这种方法可以提高代码的可维护性和可读性，并使开发人员能够更轻松地复用组件。

在业务逻辑分离方面，Vue 3 SFC 允许开发人员将业务逻辑与组件交互逻辑分离。这种方法可以提高代码的可维护性和可读性，并使开发人员能够更轻松地测试业务逻辑。

Vue 3 SFC 实现 TodoMVC 应用

为了更好地理解组件化与业务逻辑分离的优势，让我们通过构建一个简单的 TodoMVC 应用来进行演示。

1. 项目搭建

首先，我们需要创建一个新的 Vue 3 项目。我们可以使用 Vue CLI 来完成此任务。

vue create todo-mvc

2. 安装依赖

接下来，我们需要安装 TodoMVC 所需的依赖。

npm install vue-router vuex axios

3. 创建组件

现在，我们可以开始创建组件了。我们将创建一个 TodoList 组件和一个 TodoItem 组件。

TodoList.vue

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <todo-item v-for="todo in todos" :todo="todo" @delete="deleteTodo"></todo-item>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'
import TodoItem from './TodoItem.vue'

export default {
  components: { TodoItem },
  setup() {
    const todos = ref([])
    const newTodo = ref('')

    const addTodo = () => {
      todos.value.push({
        id: Date.now(),
        text: newTodo.value
      })
      newTodo.value = ''
    }

    const deleteTodo = (id) => {
      todos.value = todos.value.filter(todo => todo.id !== id)
    }

    return {
      todos,
      newTodo,
      addTodo,
      deleteTodo
    }
  }
}
</script>

TodoItem.vue

<template>
  <li>
    <input type="checkbox" v-model="todo.completed">
    <span>{{ todo.text }}</span>
    <button @click="deleteTodo">X</button>
  </li>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  emits: ['delete'],
  setup(props) {
    const deleteTodo = () => {
      this.$emit('delete', props.todo.id)
    }

    return {
      deleteTodo
    }
  }
}
</script>

4. 创建路由

接下来，我们需要创建路由。

import { createRouter, createWebHistory } from 'vue-router'
import TodoList from './components/TodoList.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: TodoList
    }
  ]
})

export default router

5. 创建仓库

最后，我们需要创建仓库。

import { createStore } from 'vuex'

const store = createStore({
  state: {
    todos: []
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
    },
    deleteTodo(state, id) {
      state.todos = state.todos.filter(todo => todo.id !== id)
    }
  }
})

export default store