Vue3单文件组件实现待办事项管理

<template>
    <section class="todoapp">
        <header class="header">
            <h1>待办事项</h1>
            <input class="new-todo" autofocus placeholder="请在此输入要添加待办事项，然后回车"
                @keyup.enter="(event) => { addTodo(event.target.value.trim()); event.target.value = '' }">
        </header>
        <main v-show="todos.length">
            <input id="toggle-all" class="toggle-all" type="checkbox" :checked="remaining === 0" @change="toggleAll">
            <label for="toggle-all">一次性标记或清除所有已完结</label>
            <ul class="todo-list">
                <li v-for="todo in filteredTodos" class="todo" :key="todo.id"
                    :class="{ completed: todo.finished, editing: todo === editedTodo }">
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="todo.finished">
                        <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
                        <button class="destroy" @click="removeTodo(todo)"></button>
                    </div>
                    <input v-if="todo === editedTodo" class="edit" type="text" v-model="todo.title"
                        @vue:mounted="({ el }) => el.focus()" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)"
                        @keyup.escape="cancelEdit(todo)">
                </li>
            </ul>
        </main>
        <footer class="footer" v-show="todos.length">
            <span class="todo-count">
                <span>还剩 </span>
                <strong>{{ remaining }}</strong>
                <span> 项待办</span>
            </span>
            <ul class="filters">
                <li>
                    <a href="#/all" :class="{ selected: visibility === 'all' }">所有事项</a>
                </li>
                <li>
                    <a href="#/unfinished" :class="{ selected: visibility === 'unfinished' }">待办事项</a>
                </li>
                <li>
                    <a href="#/finished" :class="{ selected: visibility === 'finished' }">办结事项</a>
                </li>
            </ul>
            <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
                清除办结事项
            </button>
        </footer>
    </section>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useTodosStore } from '../stores/TodosStore'

const todosStore = useTodosStore()
const { todos, visibility, editedTodo, remaining, unfinishedTodos, filteredTodos } = storeToRefs(todosStore)
const { addTodo } = todosStore // 添加待办事项

// 处理模仿按钮事件,监听请求中的hash变化
window.addEventListener('hashchange', onHashChange)
// url中的hash值变化监听
function onHashChange() {
    const route = window.location.hash.replace(/#\/?/, '')
    if (route !== 'all') {
        visibility.value = route
    } else {
        window.location.hash = ''
        visibility.value = 'all'
    }
}
// 过滤所有已办事项
function toggleAll(e) {
    todos.value.forEach((todo) => (todo.finished = e.target.checked))
}
// 删除事项（已办或待办）
function removeTodo(todo) {
    todos.value.splice(todos.value.indexOf(todo.value), 1)
}
// 编辑事项（已办或待办）
let beforeEditCache = ''
function editTodo(todo) {
    beforeEditCache = todo.title
    editedTodo.value = todo
}
// 取消事项编辑
function cancelEdit(todo) {
    editedTodo.value = null
    todo.title = beforeEditCache
}
// 完成事项编辑
function doneEdit(todo) {
    if (editedTodo.value) {
        editedTodo.value = null
        todo.title = todo.title.trim()
        if (!todo.title) removeTodo(todo)
    }
}
// 删除已办事项
function removeCompleted() {
    todos.value = unfinishedTodos.value
}

</script>

<style scoped>
.todoapp {
    background: #fff;
    margin: auto;
    width: 50vw;
    position: relative;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
        0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.todoapp h1 {
    position: absolute;
    top: -140px;
    width: 100%;
    font-size: 80px;
    font-weight: 200;
    text-align: center;
    color: #b83f45;
    text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    color: inherit;
    padding: 6px;
    border: 1px solid #999;
    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

.new-todo {
    padding: 16px 16px 16px 60px;
    height: 65px;
    border: none;
    background: rgba(0, 0, 0, 0.003);
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

main {
    position: relative;
    z-index: 2;
    border-top: 1px solid #e6e6e6;
}

.toggle-all {
    width: 1px;
    height: 1px;
    border: none;
    opacity: 0;
    position: absolute;
    right: 100%;
    bottom: 100%;
}

.toggle-all+label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 65px;
    font-size: 0;
    position: absolute;
    top: -65px;
    left: -0;
}

.toggle-all+label:before {
    content: '❯';
    display: inline-block;
    font-size: 22px;
    color: #949494;
    padding: 10px 27px 10px 27px;
    transform: rotate(90deg);
}

.toggle-all:checked+label:before {
    color: #484848;
}

.todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.todo-list li {
    position: relative;
    font-size: 24px;
    border-bottom: 1px solid #ededed;
}

.todo-list li:last-child {
    border-bottom: none;
}

.todo-list li.editing {
    border-bottom: none;
    padding: 0;
}

.todo-list li.editing .edit {
    display: block;
    width: calc(100% - 43px);
    padding: 12px 16px;
    margin: 0 0 0 43px;
}

.todo-list li.editing .view {
    display: none;
}

.todo-list li .toggle {
    text-align: center;
    width: 40px;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border: none;
}

.todo-list li .toggle {
    opacity: 0;
}

.todo-list li .toggle+label {
    background-image: url(https://blog.csdn.net/'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23949494%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: center left;
}

.todo-list li .toggle:checked+label {
    background-image: url(https://blog.csdn.net/'data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%2359A193%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20fill%3D%22%233EA390%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22%2F%3E%3C%2Fsvg%3E');
}

.todo-list li label {
    word-break: break-all;
    padding: 15px 15px 15px 60px;
    display: block;
    line-height: 1.2;
    transition: color 0.4s;
    font-weight: 400;
    color: #484848;
}

.todo-list li.completed label {
    color: #949494;
    text-decoration: line-through;
}

.todo-list li .destroy {
    display: none;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0;
    width: 40px;
    height: 40px;
    margin: auto 0;
    font-size: 30px;
    color: #949494;
    transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover,
.todo-list li .destroy:focus {
    color: #C18585;
}

.todo-list li .destroy:after {
    content: '×';
    display: block;
    height: 100%;
    line-height: 1.1;
}

.todo-list li:hover .destroy {
    display: block;
}

.todo-list li .edit {
    display: none;
}

.todo-list li.editing:last-child {
    margin-bottom: -1px;
}

.footer {
    padding: 10px 15px;
    height: 20px;
    text-align: center;
    font-size: 15px;
    border-top: 1px solid #e6e6e6;
}

.footer:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 50px;
    overflow: hidden;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
        0 8px 0 -3px #f6f6f6,
        0 9px 1px -3px rgba(0, 0, 0, 0.2),
        0 16px 0 -6px #f6f6f6,
        0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
    float: left;
    text-align: left;
}

.todo-count strong {
    font-weight: 300;
}

.filters {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    right: 0;
    left: 0;
}

.filters li {
    display: inline;
}

.filters li a {
    color: inherit;
    margin: 3px;
    padding: 3px 7px;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 3px;
}

.filters li a:hover {
    border-color: #DB7676;
}

.filters li a.selected {
    border-color: #CE4646;
}

.clear-completed,
.clear-completed:active {
    float: right;
    position: relative;
    line-height: 19px;
    text-decoration: none;
    cursor: pointer;
}

.clear-completed:hover {
    text-decoration: underline;
}

@media (max-width: 430px) {
    .footer {
        height: 50px;
    }

    .filters {
        bottom: 10px;
    }
}

:focus,
.toggle:focus+label,
.toggle-all:focus+label {
    box-shadow: 0 0 2px 2px #CF7D7D;
    outline: 0;
}
</style>

TodosStore.js

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
export const useTodosStore = defineStore('todos', () => {
  //State
  let nextId = 0
  const todos = ref([])
  const visibility = ref('all')
  const editedTodo = ref('')
  //Getter
  const finishedTodos = computed(() => todos.value.filter((todo) => todo.finished))
  const unfinishedTodos = computed(() => todos.value.filter((todo) => !todo.finished))
  const remaining = computed(() => unfinishedTodos.value.length)
  const filteredTodos = computed(() => {
    if (visibility.value === 'finished') {
      return finishedTodos.value
    } else if (visibility.value === 'unfinished') {
      return unfinishedTodos.value
    }
    return todos.value
  })
  //Actions
  function addTodo(text) {
    todos.value.push({ title: text, id: nextId++, finished: false })
  }
  //返回所有的State/Getter/Actions
  return {
    todos,
    visibility,
    editedTodo,
    remaining,
    nextId,
    finishedTodos,
    unfinishedTodos,
    filteredTodos,
    addTodo
  }
})