refactor:use_pinia

todos/package-lock.json

@@ -8,6 +8,7 @@
       "name": "todos",
       "version": "0.0.0",
       "dependencies": {
+        "pinia": "^3.0.4",
         "sortablejs": "^1.15.6",
         "vue": "^3.5.24"
       },
@@ -899,6 +900,39 @@
         "@vue/shared": "3.5.24"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.9.tgz",
+      "integrity": "sha512-kIE8wvwlcZ6TJTbNeU2HQNtaxLx3a84aotTITUuL/4bzfPxzajGBOoqjMhwZJ8L9qFYDU/lAYMEEm11dnZOD6g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-kit": "^7.7.9"
+      }
+    },
+    "node_modules/@vue/devtools-kit": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.9.tgz",
+      "integrity": "sha512-PyQ6odHSgiDVd4hnTP+aDk2X4gl2HmLDfiyEnn3/oV+ckFDuswRs4IbBT7vacMuGdwY/XemxBoh302ctbsptuA==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-shared": "^7.7.9",
+        "birpc": "^2.3.0",
+        "hookable": "^5.5.3",
+        "mitt": "^3.0.1",
+        "perfect-debounce": "^1.0.0",
+        "speakingurl": "^14.0.1",
+        "superjson": "^2.2.2"
+      }
+    },
+    "node_modules/@vue/devtools-shared": {
+      "version": "7.7.9",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.9.tgz",
+      "integrity": "sha512-iWAb0v2WYf0QWmxCGy0seZNDPdO3Sp5+u78ORnyeonS6MT4PC7VPrryX2BpMJrwlDeaZ6BD4vP4XKjK0SZqaeA==",
+      "license": "MIT",
+      "dependencies": {
+        "rfdc": "^1.4.1"
+      }
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.24",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.24.tgz",
@@ -949,6 +983,30 @@
       "integrity": "sha512-9cwHL2EsJBdi8NY22pngYYWzkTDhld6fAD6jlaeloNGciNSJL6bLpbxVgXl96X00Jtc6YWQv96YA/0sxex/k1A==",
       "license": "MIT"
     },
+    "node_modules/birpc": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.8.0.tgz",
+      "integrity": "sha512-Bz2a4qD/5GRhiHSwj30c/8kC8QGj12nNDwz3D4ErQ4Xhy35dsSDvF+RA/tWpjyU0pdGtSDiEk6B5fBGE1qNVhw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/copy-anything": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz",
+      "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-what": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -1048,6 +1106,24 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/hookable": {
+      "version": "5.5.3",
+      "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+      "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+      "license": "MIT"
+    },
+    "node_modules/is-what": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz",
+      "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -1057,6 +1133,12 @@
         "@jridgewell/sourcemap-codec": "^1.5.5"
       }
     },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1075,6 +1157,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/perfect-debounce": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
+      "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1094,6 +1182,27 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-3.0.4.tgz",
+      "integrity": "sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^7.7.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.5.0",
+        "vue": "^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -1122,6 +1231,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/rfdc": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
+      "license": "MIT"
+    },
     "node_modules/rollup": {
       "version": "4.53.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.2.tgz",
@@ -1179,6 +1294,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/speakingurl": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+      "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/superjson": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz",
+      "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==",
+      "license": "MIT",
+      "dependencies": {
+        "copy-anything": "^4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",

todos/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "pinia": "^3.0.4",
     "sortablejs": "^1.15.6",
     "vue": "^3.5.24"
   },

todos/src/App.vue

@@ -1,89 +1,60 @@
-<script>
+<script setup>
 import TodoHeader from "./components/TodoHeader.vue";
 import TodoList from "./components/TodoList.vue";
 import TodoFooter from "./components/TodoFooter.vue";
 
-export default {
+import { useTodoStore } from "./stores/todo";
-  components: {
+import { computed } from "vue";
-    TodoHeader,
-    TodoList,
-    TodoFooter,
-  },
 
-  data() {
+const todoStore = useTodoStore();
-    return {
-      // 从 localStorage 初始化
-      todos: JSON.parse(localStorage.getItem("vue-todos") || "[]"),
-      tabType: 0, // 0全部 1未完成 2已完成
-    };
-  },
 
-  computed: {
+function addTodo(newTodo) {
-    // 筛选后的列表
+  console.log("App.vue addTodo:", newTodo);
-    todoList() {
+  todoStore.addTodo(newTodo);
-      if (this.tabType === 0) return this.todos;
+}
-      const type = this.tabType;
-      return this.todos.filter((item) => {
-        if (type === 1) return !item.completed;
-        return item.completed;
-      });
-    },
-  },
 
-  methods: {
+function delTodo(item) {
-    addTodo(newTodo) {
+  console.log("App.vue delTodo:", item);
-      const todo = {
+  todoStore.delTodo(item);
-        id: Date.now(),
+}
-        txt: newTodo,
-        completed: false,
-      };
-      this.todos.push(todo);
-      console.log("添加 Todo:", todo);
-    },
 
-    moveTodo({ oldIndex, newIndex }) {
+function moveTodo({ oldIndex, newIndex }) {
-      const item = this.todos.splice(oldIndex, 1)[0];
+  console.log("App.vue moveTodo:", oldIndex, newIndex);
-      this.todos.splice(newIndex, 0, item);
+  todoStore.moveTodo(oldIndex, newIndex);
-    },
+}
 
-    delTodo(item) {
+function editTodo({ item, text }) {
-      console.log("删除 Todo:", item);
+  console.log("App.vue editTodo:", item, text);
-      this.todos = this.todos.filter((t) => t.id !== item.id);
+  todoStore.editTodo({ item, text });
-    },
+}
 
-    editTodo({ item, text }) {
+function changeTabType(type) {
-      item.txt = text;
+  console.log("App.vue tab change:", type);
-      console.log("编辑 Todo:", item);
+  todoStore.setTab(type);
-    },
+}
 
-    toggleTodo(item) {
+const showTodos = computed(() => {
-      console.log("完成状态切换:", item);
+  if (todoStore.tabType === 1)
-    },
+    return todoStore.todos.filter((t) => !t.completed);
-
+  if (todoStore.tabType === 2)
-    changeTabType(type) {
+    return todoStore.todos.filter((t) => t.completed);
-      console.log("切换 Tab:", type);
+  return todoStore.todos;
-      this.tabType = type;
+});
-    },
-  },
-
-  watch: {
-    todos: {
-      handler(todos) {
-        console.log("Todos 改变:", todos);
-        localStorage.setItem("vue-todos", JSON.stringify(todos));
-      },
-      deep: true,
-    },
-  },
-};
 </script>
 
 <template>
   <TodoHeader @addTodo="addTodo" />
-  <TodoList :todos="todoList" @delTodo="delTodo" @move="moveTodo" @edit="editTodo"/>
+
+  <TodoList
+    :todos="showTodos"
+    @delTodo="delTodo"
+    @move="moveTodo"
+    @edit="editTodo"
+  />
+
   <TodoFooter
-    :count="todoList.length"
+    :count="showTodos.length"
-    :tabType="tabType"
+    :tabType="todoStore.tabType"
     @changeTabType="changeTabType"
   />
 </template>

todos/src/components/TodoFooter.vue

@@ -50,7 +50,7 @@ export default {
 }
 
 .active {
-  color: #409eff !important;
+  color: #ff4d4f !important;
   font-weight: bold;
 }
 </style>

todos/src/components/TodoHeader.vue

@@ -16,6 +16,36 @@
   </div>
 </template>
 
+<script>
+const WORD_COUNT_LIMIT = 50;
+
+export default {
+  data() {
+    return {
+      newTodo: "",
+      countLimit: WORD_COUNT_LIMIT,
+    };
+  },
+
+  computed: {
+    isShowMsg() {
+      return this.newTodo.length > WORD_COUNT_LIMIT;
+    },
+  },
+
+  methods: {
+    addNewTodo() {
+      if (this.newTodo.length === 0 || this.newTodo.length > WORD_COUNT_LIMIT) {
+        return;
+      }
+
+      this.$emit("addTodo", this.newTodo);
+      this.newTodo = "";
+    },
+  },
+};
+</script>
+
 <style scoped>
 h1 {
   color: #409eff;
@@ -57,33 +87,3 @@ p {
   text-align: center;
 }
 </style>
-
-<script>
-const WORD_COUNT_LIMIT = 50;
-
-export default {
-  data() {
-    return {
-      newTodo: "",
-      countLimit: WORD_COUNT_LIMIT,
-    };
-  },
-
-  computed: {
-    isShowMsg() {
-      return this.newTodo.length > WORD_COUNT_LIMIT;
-    },
-  },
-
-  methods: {
-    addNewTodo() {
-      if (this.newTodo.length === 0 || this.newTodo.length > WORD_COUNT_LIMIT) {
-        return;
-      }
-
-      this.$emit("addTodo", this.newTodo);
-      this.newTodo = "";
-    },
-  },
-};
-</script>

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>

todos/src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import App from "./App.vue";
 import "./assets/global.css";
 
-createApp(App).mount("#app");
+createApp(App).use(createPinia()).mount("#app");

todos/src/stores/todo.js

@@ -0,0 +1,75 @@
+import { defineStore } from "pinia";
+import { toRaw } from "vue";
+
+const STORAGE_KEY = "vue-todos";
+
+export const useTodoStore = defineStore("todoStore", {
+  state: () => ({
+    todos: JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]"),
+    tabType: 0, // 0全部 1未完成 2已完成
+  }),
+
+  getters: {
+    leftCount(state) {
+      return state.todos.filter((t) => !t.completed).length;
+    },
+  },
+
+  actions: {
+    save() {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(toRaw(this.todos)));
+    },
+
+    setTab(type) {
+      this.tabType = type;
+    },
+
+    addTodo(txt) {
+      const newTodo = {
+        id: Date.now(),
+        txt,
+        completed: false,
+      };
+      this.todos.push(newTodo);
+      this.save();
+      console.log("Added:", newTodo);
+      console.log("Current todos:", toRaw(this.todos));
+    },
+
+    delTodo(item) {
+      this.todos = this.todos.filter((t) => t.id !== item.id);
+      this.save();
+      console.log("Deleted:", item);
+      console.log("Current todos:", toRaw(this.todos));
+    },
+
+    editTodo({ item, text }) {
+      const t = this.todos.find((t) => t.id === item.id);
+      if (t) {
+        t.txt = text;
+        this.save();
+        console.log("Edited:", item.id, "=>", text);
+        console.log("Current todos:", toRaw(this.todos));
+      }
+    },
+
+    moveTodo(oldIndex, newIndex) {
+      if (oldIndex === newIndex) return;
+
+      const arr = this.todos;
+      const moved = arr.splice(oldIndex, 1)[0];
+      arr.splice(newIndex, 0, moved);
+
+      this.save();
+      console.log(`Move: ${oldIndex} → ${newIndex}`);
+      console.log("Current todos:", toRaw(this.todos));
+    },
+
+    clearCompleted() {
+      this.todos = this.todos.filter((t) => !t.completed);
+      this.save();
+      console.log("Clear completed");
+      console.log("Current todos:", toRaw(this.todos));
+    },
+  },
+});