Vue实战进阶：打造任务清单todoList应用程序

前端

2023-09-05 11:19:17

Vue高级系列（四）Vue模块化实战 - demo2 - 任务清单todoList

今天，我们将使用Vue来构建一个简单的待办事项应用程序。这个demo旨在展示Vue的模块化特性，并提供一个实际的示例，说明如何在Vue中组织和管理代码。

模块化设计

模块化设计是一种软件开发方法，它将应用程序分解成较小的、可重用的组件。在Vue中，模块化通常通过将组件组织成模块来实现。模块可以表示应用程序的特定功能或特性。

Vuex状态管理

在我们的待办事项应用程序中，我们将使用Vuex进行状态管理。Vuex是一个状态管理库，它提供了一个集中式存储，用于管理应用程序的状态。这有助于确保应用程序状态的一致性和可预测性。

创建模块

首先，让我们创建一个新的Vue项目并安装Vuex：

vue create todo-list
cd todo-list
npm install vuex

然后，在src目录中创建一个名为store的目录。在这个目录中，我们将创建两个文件：index.js和todo.js。

index.js文件将作为Vuex存储的根模块：

import Vuex from 'vuex'
import Vue from 'vue'
import todo from './todo'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    todo
  }
})

export default store

todo.js文件将包含待办事项模块：

const state = {
  todos: []
}

const mutations = {
  ADD_TODO(state, todo) {
    state.todos.push(todo)
  },
  REMOVE_TODO(state, todo) {
    const index = state.todos.indexOf(todo)
    if (index > -1) {
      state.todos.splice(index, 1)
    }
  },
  TOGGLE_TODO(state, todo) {
    todo.completed = !todo.completed
  }
}

export default {
  state,
  mutations
}

创建组件

现在，让我们创建组件来使用我们的状态模块：

TodoList.vue ：显示待办事项列表。
TodoItem.vue ：显示单个待办事项。
TodoInput.vue ：用于添加新待办事项的表单。

<!-- TodoList.vue -->
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <TodoItem :todo="todo"></TodoItem>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      todos: state => state.todo.todos
    })
  }
}
</script>

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

<script>
import { mapActions } from 'vuex'

export default {
  props: ['todo'],
  methods: {
    ...mapActions({
      removeTodo: 'todo/REMOVE_TODO',
      toggleTodo: 'todo/TOGGLE_TODO'
    }),
    removeTodo() {
      this.removeTodo(this.todo)
    },
    toggleTodo() {
      this.toggleTodo(this.todo)
    }
  }
}
</script>

<!-- TodoInput.vue -->
<template>
  <form @submit.prevent="addTodo">
    <input type="text" v-model="newTodo">
    <button type="submit">添加</button>
  </form>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      newTodo: ''
    }
  },
  methods: {
    ...mapActions({
      addTodo: 'todo/ADD_TODO'
    }),
    addTodo() {
      if (this.newTodo.trim()) {
        this.addTodo({
          text: this.newTodo,
          completed: false
        })
        this.newTodo = ''
      }
    }
  }
}
</script>

使用应用程序

现在，让我们在App.vue组件中使用我们的组件：

<template>
  <div id="app">
    <h1>任务清单</h1>
    <TodoList></TodoList>
    <TodoInput></TodoInput>
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue'
import TodoInput from './components/TodoInput.vue'

export default {
  components: {
    TodoList,
    TodoInput
  }
}
</script>