feat[ptr]: 虽然 Vue2-mixins 能实现内聚，但是存在混合之间层次扁平化、执行顺序等问题

而 Vue3 composition 可以直接进行 函数级别的交互

Author: ceilf6

Vue3/sandboxs-vite/src/App.vue

@@ -8,7 +8,10 @@
           autofocus=""
           autocomplete="off"
           placeholder="What needs to be done?"
+          v-model="newTodoRef"
+          @keyup.enter="addTodo"
         />
+        <!-- 通过 enter 修饰符，当回车时 -->
       </header>
       <section class="main">
         <input id="toggle-all" class="toggle-all" type="checkbox" />
@@ -59,18 +62,16 @@
 </template>
 
 <script>
-import { ref, watchEffect } from "vue";
-import * as todoStorage from "./utils/todoStorage";
+import { useNewTodo, useTodoList } from "./components";
 
 export default {
   setup() {
-    const todoRef = ref(todoStorage.fetchTodos());
-    // 监控副作用
-    // 在 watch 中读取的会自动收集依赖
-    // 当依赖变化时会自动运行该副作用函数
-    watchEffect(() => {
-      todoStorage.saveTodos(todoRef.value);
-    });
+    const { todoRef } = useTodoList();
+    return {
+      // todoRef: todoList.todoRef,
+      todoRef,
+      ...useNewTodo(todoRef),
+    };
   },
 };
 </script>

Vue3/sandboxs-vite/src/components/index.js

@@ -1 +1,3 @@
-export { default as useCount } from './useCount'
+export { default as useCount } from './useCount'
+export { default as useNewTodo } from './useNewTodo'
+export { default as useTodoList } from './useTodoList'

Vue3/sandboxs-vite/src/components/useNewTodo.js

@@ -0,0 +1,23 @@
+import { ref } from "vue";
+import { generateID } from "../utils/todoStorage";
+
+export default function useNewTodo(todoRef) {
+    const newTodoRef = ref("") // 到时候 v-model 绑定到输入框上，获取新任务内容
+
+    const addTodo = () => {
+        const val = newTodoRef.value && newTodoRef.value.trim()
+        if (!val) return
+        const newTodoObj = {
+            title: val,
+            completed: false,
+            id: generateID()
+        }
+        todoRef.value.push(newTodoObj) // 注意 setup 中是对象得手动解一层
+        newTodoRef.value = ""; // 清空输入框
+    }
+
+    return {
+        newTodoRef,
+        addTodo
+    }
+}

Vue3/sandboxs-vite/src/components/useTodoList.js

@@ -1,4 +1,16 @@
+import { ref, watchEffect } from "vue";
+import * as todoStorage from "../utils/todoStorage";
 
 export default function useTodoList() {
+    const todoRef = ref(todoStorage.fetchTodos());
+    // 监控副作用
+    // 在 watch 中读取的会自动收集依赖
+    // 当依赖变化时会自动运行该副作用函数
+    watchEffect(() => {
+        todoStorage.saveTodos(todoRef.value);
+    });
 
+    return {
+        todoRef
+    }
 }

Vue3/sandboxs-vite/src/utils/todoStorage.js

@@ -18,4 +18,12 @@ export function fetchTodos() {
  */
 export function saveTodos(newTodos) {
     localStorage.setItem(TODOS_KEY, JSON.stringify(newTodos))
+}
+
+/**
+ * 生成任务的唯一ID = 时间戳 + 随机数
+ */
+export function generateID() {
+    return Date.now() + Math.random().toString(16).substring(2, 6)
+    // 已经不推荐 substr 第二个参数为长度，推荐 substring 第二个参数为结束位置更直观
 }