有了前面2章节的内容，相信小伙伴们自己也可以试着写写了，动手后的你们是不是发现很简单了？现在我们继续下一章节的内容，自定义任务分组。
Todo List GitHub代码库
本次《todo list: Vue待办事项任务管理》，分为一下章节，有兴趣的同学可以持续关注。
第一章: 初识（项目搭建、基本功能组件实现）
第二章: 数据动态化处理（localStorage + Vuex），可新增，可编辑
第三章：待办事项自定义分组
第四章：待办事项添加描述图片等信息
第五章：可线上操作，入库Mysql
第六章：多人协同处理待办事项，权限管理
第七章：完结：线上发布
初步定义7个章节，实际开发中有可能有所增减。
html页面调整主要在todo-list.vue上面添加“新建分组按钮”和新增输入“分组名称”弹框。
新建分组
-
分组名称
对象弹框确认事件：
/confirm/iCreateGroup () {
this.$store.commit(types.M_CREATE_TODO_LIST_GROUP, {
title: this.groupName,
list: []
})
}
这里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。
这样就轻松完成了，任务分组。
预览图 总结本章节主要内容是localStorage + Vuex，使其任务数据状态持久化。后续内容会持续更新，请持续关注。同时打算推出相关视频，让大家学习起来更简单明了。
Todo List GitHub代码库
