list 分组_Todo List(源码已上传git): 待办事项自定义分组 - 第三章

点击右上方红色按钮关注“web秀”，让你真正秀起来

前言

有了前面2章节的内容，相信小伙伴们自己也可以试着写写了，动手后的你们是不是发现很简单了？现在我们继续下一章节的内容，自定义任务分组。

GitHub - javanf/todo-list: 待办任务管理

Todo List(源码已上传git): 待办事项自定义分组 - 第三章

本次《todo list: Vue待办事项任务管理》，分为一下章节，有兴趣的同学可以持续关注。

第一章: 初识(项目搭建、基本功能组件实现)

第二章: 数据动态化处理(localStorage + Vuex)，可新增，可编辑

第三章：待办事项自定义分组

第四章：待办事项添加描述图片等信息

第五章：可线上操作，入库Mysql

第六章：多人协同处理待办事项，权限管理

第七章：完结：线上发布

初步定义7个章节，实际开发中有可能有所增减。

html页面调整

主要在todo-list.vue上面添加“新建分组按钮”和新增输入“分组名称”弹框。

新建分组

分组名称

对象弹框确认事件：

confirmCreateGroup () {  this.$store.commit(types.M_CREATE_TODO_LIST_GROUP, {  title: this.groupName,  list: []  }) }

store修改

这里store新增了M_CREATE_TODO_LIST_GROUP方法，所以去store/types.js添加：

export const M_CREATE_TODO_LIST_GROUP = 'M_CREATE_TODO_LIST_GROUP'

store/mutations.js内容：

[types.M_CREATE_TODO_LIST_GROUP] (state, data) {  state.todoData.push(data)  todoStorage.setTodoList = state.todoData }

直接向state.todoDatapush传入的参数，也就是分组名称和分组任务的空数组。然后同步到Storage。

这样就轻松完成了，任务分组。

预览图

GitHub - javanf/todo-list: 待办任务管理

公告

喜欢小编的点击关注，了解更多知识！

源码地址，可以点击下方“了解更多”获取！