refactor:use_pinia

todos/src/components/TodoList.vue

@@ -44,6 +44,49 @@
   </div>
 </template>
 
+<script>
+export default {
+  props: ["todos"],
+  data() {
+    return {
+      editingId: null,
+      editText: "",
+      dragIndex: null,
+    };
+  },
+  methods: {
+    delTodo(item) {
+      this.$emit("delTodo", item);
+    },
+    onDragStart(index) {
+      this.dragIndex = index;
+    },
+    onDragOver(index) {},
+    onDrop(index) {
+      if (this.dragIndex === null || this.dragIndex === index) return;
+      this.$emit("move", { oldIndex: this.dragIndex, newIndex: index });
+      this.dragIndex = null;
+    },
+    startEdit(item) {
+      this.editingId = item.id;
+      this.editText = item.txt;
+    },
+
+    confirmEdit(item) {
+      const text = this.editText.trim();
+      if (text) {
+        this.$emit("edit", { item, text });
+      }
+      this.editingId = null;
+    },
+
+    cancelEdit() {
+      this.editingId = null;
+    },
+  },
+};
+</script>
+
 <style scoped>
 .tdContainer {
   margin-top: 20px;
@@ -125,45 +168,3 @@
   box-sizing: border-box;
 }
 </style>
-
-<script>
-export default {
-  props: ["todos"],
-  data() {
-    return {
-      editingId: null,
-      editText: "",
-    };
-  },
-  methods: {
-    delTodo(item) {
-      this.$emit("delTodo", item);
-    },
-    onDragStart(index) {
-      this.dragIndex = index;
-    },
-    onDragOver(index) {},
-    onDrop(index) {
-      if (this.dragIndex === null || this.dragIndex === index) return;
-      this.$emit("move", { oldIndex: this.dragIndex, newIndex: index });
-      this.dragIndex = null;
-    },
-    startEdit(item) {
-      this.editingId = item.id;
-      this.editText = item.txt;
-    },
-
-    confirmEdit(item) {
-      const text = this.editText.trim();
-      if (text) {
-        this.$emit("edit", { item, text });
-      }
-      this.editingId = null;
-    },
-
-    cancelEdit() {
-      this.editingId = null;
-    },
-  },
-};
-</script>