From f734593ff6ebb45c0df61e58b3f7671671f1aef6 Mon Sep 17 00:00:00 2001 From: dichgrem Date: Mon, 1 Dec 2025 11:16:39 +0800 Subject: [PATCH] refactor:use_pinia --- todos/package-lock.json | 136 ++++++++++++++++++++++++++++ todos/package.json | 1 + todos/src/App.vue | 111 +++++++++-------------- todos/src/components/TodoFooter.vue | 2 +- todos/src/components/TodoHeader.vue | 60 ++++++------ todos/src/components/TodoList.vue | 85 ++++++++--------- todos/src/main.js | 3 +- todos/src/stores/todo.js | 75 +++++++++++++++ 8 files changed, 329 insertions(+), 144 deletions(-) create mode 100644 todos/src/stores/todo.js diff --git a/todos/package-lock.json b/todos/package-lock.json index e694da0..a6e099e 100644 --- a/todos/package-lock.json +++ b/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", diff --git a/todos/package.json b/todos/package.json index 0ea697e..2994486 100644 --- a/todos/package.json +++ b/todos/package.json @@ -9,6 +9,7 @@ "preview": "vite preview" }, "dependencies": { + "pinia": "^3.0.4", "sortablejs": "^1.15.6", "vue": "^3.5.24" }, diff --git a/todos/src/App.vue b/todos/src/App.vue index f40ae7c..6b23cc7 100644 --- a/todos/src/App.vue +++ b/todos/src/App.vue @@ -1,89 +1,60 @@ - diff --git a/todos/src/components/TodoFooter.vue b/todos/src/components/TodoFooter.vue index 6a2c28f..fac6ed0 100644 --- a/todos/src/components/TodoFooter.vue +++ b/todos/src/components/TodoFooter.vue @@ -50,7 +50,7 @@ export default { } .active { - color: #409eff !important; + color: #ff4d4f !important; font-weight: bold; } diff --git a/todos/src/components/TodoHeader.vue b/todos/src/components/TodoHeader.vue index d30898c..c56a053 100644 --- a/todos/src/components/TodoHeader.vue +++ b/todos/src/components/TodoHeader.vue @@ -16,6 +16,36 @@ + + - - diff --git a/todos/src/components/TodoList.vue b/todos/src/components/TodoList.vue index 08a8f3b..b08002d 100644 --- a/todos/src/components/TodoList.vue +++ b/todos/src/components/TodoList.vue @@ -44,6 +44,49 @@ + + - - diff --git a/todos/src/main.js b/todos/src/main.js index 4611ed9..2af8e9d 100644 --- a/todos/src/main.js +++ b/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"); diff --git a/todos/src/stores/todo.js b/todos/src/stores/todo.js new file mode 100644 index 0000000..c46f5c9 --- /dev/null +++ b/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)); + }, + }, +});