TodoList 案例（Vue3）: 使用Composition API

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

• • 项目结构
  • TodoList.vue
  • TodoItem.vue
  • App.vue
  • main.js
  • store.js (可选)
  • 总结

以下是一个简单的TodoList案例，展示了如何在Vue3中使用Composition API来实现一个基本的待办事项列表。

项目结构

src/
|-- components/
|   |-- TodoList.vue
|   |-- TodoItem.vue
|-- App.vue
|-- main.js
|-- store.js (使用Vuex)

TodoList.vue

<template>
<div>
<h1>Todo List</h1>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo">
<ul>
<TodoItem
v-for="(todo, index) in todos"
:key="index"
:todo="todo"
@delete="deleteTodo(index)"
/>
</ul>
</div>
</template>

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

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

const addTodo = () => {
if (newTodo.value.trim()) {
todos.value.push({ text: newTodo.value.trim(), done: false });
newTodo.value = '';
}
};

const deleteTodo = (index) => {
todos.value.splice(index, 1);
};

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

TodoItem.vue

<template>
<li>
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button @click="$emit('delete')">Delete</button>
</li>
</template>

<script>
export default {
props: {
todo: Object
}
};
</script>

<style>
.done {
text-decoration: line-through;
}
</style>

App.vue

<template>
<TodoList />
</template>

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

export default {
components: {
TodoList
}
};
</script>

main.js

import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 如果使用Vuex

const app = createApp(App);
app.use(store); // 如果使用Vuex
app.mount('#app');

store.js (可选)

如果你想使用Vuex来管理状态，可以创建一个store.js文件：

import { createStore } from 'vuex';

export default createStore({
state: {
todos: []
},
mutations: {
addTodo(state, todo) {
state.todos.push(todo);
},
deleteTodo(state, index) {
state.todos.splice(index, 1);
}
},
actions: {
// 可以在这里添加异步操作
}
});

然后在 main.js 中引入并使用这个store。

总结

以上代码展示了一个简单的TodoList应用，使用了Vue3的Composition API。在这个案例中，我们创建了两个组件：TodoList 和 TodoItem。TodoList 组件负责管理待办事项的添加和删除，而 TodoItem 组件负责显示单个待办事项。这个例子没有使用Vuex，但是你可以很容易地将其集成到Vuex store中，以便更好地管理状态。