ရိုးရိုးလေး ရှင်းပြမယ်
Project ကို TaskForm, TaskList, TaskItem နှင့် FilterBar components အဖြစ်ခွဲပါ။ Tasks ကို Pinia store ထဲသိမ်းပြီး filteredTasks ကို getter ဖြင့်တွက်ပါ။ Router တွင် dashboard နှင့် task detail routes ထည့်ပြီး form accessibility, empty state နှင့် error handling ကိုစစ်ပါ။
javascript
// stores/tasks.js
import { defineStore } from 'pinia'
export const useTasksStore = defineStore('tasks', {
state: () => ({ tasks: [], filter: 'all' }),
getters: {
visible: (state) => state.tasks.filter((task) =>
state.filter === 'all' ||
(state.filter === 'done' ? task.done : !task.done)
)
},
actions: {
add(title) {
this.tasks.push({ id: crypto.randomUUID(), title, done: false })
},
toggle(id) {
const task = this.tasks.find((item) => item.id === id)
if (task) task.done = !task.done
}
}
})You should see
A filterable task dashboard with persistent component stateလက်တွေ့စမ်းကြည့်ရန်
Task add/toggle/delete, all/open/done filters, detail route နှင့် localStorage persistence ကိုပြီးစီးအောင်တည်ဆောက်ပါ။
Vue Best Practices — Vue.js