本文翻译自：dev.to/burakgur/cr…
作者：Burak Gür
这里我给大家展示如何使用合成api创建待办事项应用程序。Composition api是Vue.js的新功能，就像React Hooks一样。
1.使用Vue CLI创建新的Vue 3项目。
vue create-app todo-app
2.在App.vue.中创建表单和待办事项列表
<template>
<h1>ToDo App</h1>
<form @submit.prevent="addTodo()">
<label>New ToDo </label>
<input
v-model="newTodo"
name="newTodo"
autocomplete="off"
>
<button>Add ToDo</button>
</form>
<h2>ToDo List</h2>
<ul>
<li
v-for="(todo, index) in todos"
:key="index"
>
<span
:class="{ done: todo.done }"
@click="doneTodo(todo)"
>{{ todo.content }}</span>
<button @click="removeTodo(index)">Remove</button>
</li>
</ul>
<h4 v-if="todos.length === 0">Empty list.</h4>
</template>
3.导入ref包。获取一个内部值并返回一个反应性和可变的ref对象。
<script>
import { ref } from 'vue';
</script>
4.安装功能是一个新的组件选项。创建设置功能。
<script>
import { ref } from 'vue';
export default {
name: 'App',
setup () {
}
}
</script>
5.创建所有属性和方法。此外，我们还使用本地存储进行数据保存。
<script>
import { ref } from 'vue';
export default {
name: 'App',
setup () {
const newTodo = ref('');
const defaultData = [{
done: false,
content: 'Write a blog post'
}]
const todosData = JSON.parse(localStorage.getItem('todos')) || defaultData;
const todos = ref(todosData);
function addTodo () {
if (newTodo.value) {
todos.value.push({
done: false,
content: newTodo.value
});
newTodo.value = '';
}
saveData();
}
function doneTodo (todo) {
todo.done = !todo.done
saveData();
}
function removeTodo (index) {
todos.value.splice(index, 1);
saveData();
}
function saveData () {
const storageData = JSON.stringify(todos.value);
localStorage.setItem('todos', storageData);
}
return {
todos,
newTodo,
addTodo,
doneTodo,
removeTodo,
saveData
}
}
}
</script>
完成！另外，我在App.vue.中添加了一些SCSS代码见演示：
演示： https：//todo-app.burakgur.vercel.app/
回购：github.com/BurakGur/vu…
感谢阅读😊
