feat[ptr]: Vue2 中计算属性可以通过 set 影响原始数据

Vue3 的 computed 最佳设计只设置 get 视为是只读的快照

Author: ceilf6

Vue3/sandboxs-vite/src/components/Todos.vue

@@ -14,23 +14,41 @@
         <!-- 通过 enter 修饰符，当回车时 -->
       </header>
       <section class="main">
-        <input id="toggle-all" class="toggle-all" type="checkbox" />
+        <input
+          id="toggle-all"
+          class="toggle-all"
+          type="checkbox"
+          :checked="allDoneRef"
+          @input="setAllChecked($event.target.checked)"
+        />
+        <!-- 事件源（checkbox）的勾选状态，true/false -->
         <!-- checkbox 是设置了背景图 ⭕️ ，然后设置了本体完全透明（点击仍是本体处理 -->
         <label for="toggle-all">Mark all as complete</label>
         <ul class="todo-list">
           <li
             class="todo"
-            :class="{ completed: todo.completed }"
+            :class="{ completed: todo.completed, editing: todo === nowEditing }"
             v-for="todo in filteredTodoRef"
             :key="todo.id"
           >
-            <!-- li 自带类样式 completed -->
+            <!-- li 自带类样式 completed 和 editing -->
             <div class="view">
               <input class="toggle" type="checkbox" v-model="todo.completed" />
-              <label>{{ todo.title }}</label>
+              <label @dblclick="() => handleDBLClick(todo)">{{
+                todo.title
+              }}</label>
+              <!-- double left click -->
               <button class="destroy"></button>
             </div>
-            <input class="edit" type="text" />
+            <input
+              class="edit"
+              type="text"
+              v-model="todo.title"
+              @blue="doneEdit"
+              @keyup.enter="doneEdit"
+              @keyup.escape="() => cancelEdit(todo)"
+            />
+            <!-- 双向绑定之后，todoRef 变化 => 自动执行监控副作用 todoStorage.saveTodos -->
           </li>
         </ul>
       </section>
@@ -68,7 +86,12 @@
 </template>
 
 <script>
-import { useNewTodo, useTodoList, useFilter } from "../compositions";
+import {
+  useNewTodo,
+  useTodoList,
+  useFilter,
+  useEditTodo,
+} from "../compositions";
 
 export default {
   setup() {
@@ -78,6 +101,7 @@ export default {
       todoRef,
       ...useNewTodo(todoRef),
       ...useFilter(todoRef),
+      ...useEditTodo(todoRef),
     };
   },
 };

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

@@ -1,4 +1,5 @@
 export { default as useCount } from './useCount'
 export { default as useNewTodo } from './useNewTodo'
 export { default as useTodoList } from './useTodoList'
-export { default as useFilter } from './useFilter'
+export { default as useFilter } from './useFilter'
+export { default as useEditTodo } from './useEditTodo'

Vue3/sandboxs-vite/src/compositions/useEditTodo.js

@@ -0,0 +1,43 @@
+import { ref, computed } from "vue";
+
+export default function useEditTodo(TodoRef) {
+    const nowEditing = ref(null)
+
+    let originCache = null // 存储原先值用于取消更改后恢复
+    // 由于一次只有一个 nowEditing 所以只需要维护一个即可
+
+    const handleDBLClick = (todo) => {
+        nowEditing.value = todo
+        originCache = todo.title
+    }
+
+    const doneEdit = () => {
+        nowEditing.value = null
+    }
+
+    const cancelEdit = (todo) => {
+        nowEditing.value = null
+        todo.title = originCache
+    }
+
+    // 用于处理页面刷新后 :checked 样式
+    const allDoneRef = computed(() => {
+        var val = TodoRef.value.filter((it) => !it.completed).length === 0;
+        return val;
+    });
+
+    function setAllChecked(checked) {
+        TodoRef.value.forEach((todo) => {
+            todo.completed = checked;
+        });
+    }
+
+    return {
+        nowEditing,
+        handleDBLClick,
+        doneEdit,
+        cancelEdit,
+        allDoneRef,
+        setAllChecked,
+    }
+}

Vue3/sandboxs-vite/src/compositions/useFilter.js

@@ -26,11 +26,13 @@ export default function useFilter(todoRef) {
         window.removeEventListener("hashchange", onHashChange)
     })
 
-    const filteredTodoRef = computed({
-        get() {
+    const filteredTodoRef = computed(
+        // {get() 
+        () => {
             return filter(todoRef.value, filterRef.value) // 别忘记 .value
         }
-    })
+        // }
+    )
 
     const remainingRef = computed(() => {
         return filter(todoRef.value, "active").length;