vue3-03 todo-新增任务

步骤：

1. todoStorage.js：定义获取任务列表的方法、将任务存储到localStorage的方法、后续需要用到的获取随机id的方法。
2. useTodoList.js：用一个响应式变量todosRef接收任务列表的数据；使用watchEffect方法将新增的任务保存到localStorage。最后再将页面需要的todosRef返回出去。
3. useNewTodo.js：用于任务的新增。首先需要用一个响应式变量newTodoRef（在页面中需要通过v-model来绑定）来存储页面新增的任务标题；其次声明一个addTodo方法（在页面中通过@keyup.enter事件）用于新增任务的操作，在生成一个任务后，需要将其添加到任务列表中，而任务列表是用useTodoList.js文件的todosRef来存储的，因此需要在App.vue页面中，将todosRef传给useNewTodo；最后将需要的 newTodoRef和addTodo返回出去。

App.vue
<template>
  <link rel="stylesheet" href="./style.css" />
  <div id="app">
    <section class="todoapp">
      <header class="header">
        <h1>todosh1>
        <input class="new-todo" autofocus="" autocomplete="off" placeholder="What needs to be done?" v-model="newTodoRef"
          @keyup.enter="addTodo" />
      header>
      <section class="main">
        <input id="toggle-all" class="toggle-all" type="checkbox" />
        <label for="toggle-all">Mark all as completelabel>
        <ul class="todo-list">
          <li class="todo">
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>学习composition apilabel>
              <button class="destroy">button>
            div>
            <input class="edit" type="text" />
          li>
          <li class="todo">
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>投递50封简历label>
              <button class="destroy">button>
            div>
            <input class="edit" type="text" />
          li>
          <li class="todo">
            <div class="view">
              <input class="toggle" type="checkbox" />
              <label>上午10:30 参加面试label>
              <button class="destroy">button>
            div>
            <input class="edit" type="text" />
          li>
        ul>
      section>
      <footer class="footer">
        <span class="todo-count">
          <strong>3strong>
          <span>items leftspan>
        span>
        <ul class="filters">
          <li><a href="#/all" class="selected">Alla>li>
          <li><a href="#/active" class="">Activea>li>
          <li><a href="#/completed" class="">Completeda>li>
        ul>
        <button class="clear-completed" style="display: none">
          Clear completed
        button>
      footer>
    section>
  div>
template>

<script>
import useTodoList from "./composition/useTodoList"
import useNewTodo from "./composition/useNewTodo"
export default {
  setup() {
    const { todosRef } = useTodoList();
    return {
      todosRef,
      ...useNewTodo(todosRef)
    }
  }
}
script>

todoList.js
const LOCAL_KEY = 'todomvc';
/**
 * 生成一个随机id 时间戳+四位随机数
 */
export function generateId() {
    return Date.now() + Math.random().toString(16).slice(2,4);
}
/**
 * 获取所有的任务
 */
export function fetch() {
    const resultArr = localStorage.getItem(LOCAL_KEY);
    if (resultArr) {
        // 通过 JSON.parse() 方法将 resultArr 变量中的数据解析为 JavaScript 对象或数组。这是因为本地存储中的数据通常以字符串的形式保存，而在使用之前需要将其转换为 JavaScript 对象或数组。
        return JSON.parse(resultArr);
    }
    // 否则
    return [];
}

/**
 * 保存任务
 * @param {*} todos 任务列表
 */
export function save(todos) {
    localStorage.setItem(LOCAL_KEY, JSON.stringify(todos));
}

useTodoList.js
// watchEffect 函数用于创建一个响应式的副作用函数。它的作用是在其依赖的响应式数据发生变化时自动运行副作用函数。
import { ref,watchEffect } from "vue";
import * as todoStorage from "../util/todoStorage.js"
export default function useTodoList() {
    const todosRef = ref(todoStorage.fetch());
    window.todosRef = todosRef; //用于测试
    watchEffect(() => {
        todoStorage.save(todosRef.value); //当其依赖的响应式数据todoRef.value发生变化的就会执行save。
    })
    return{
        todosRef
    }
}

useNewtodo.js
import { ref} from "vue";
import {generateId} from "../util/todoStorage";
export default function useNewTodo(todosRef) {
    const newTodoRef = ref(""); //新增任务的标题
    // 新增一个任务
    const addTodo = () => {
        // 新增一个任务
        const value = newTodoRef.value && newTodoRef.value.trim();
        console.log(value,'1111');
        if (!value) {
            return;
        }
        // 生成一个任务，并将其加入到任务列表中
        const todo = {
            id: generateId(),
            title: value,
            completed: false, //任务是否完成
        }
        console.log(todo,'todo');
        todosRef.value.push(todo);
        newTodoRef.value ="";
    }
    return {
        newTodoRef,
        addTodo,
    }
}