使用Vue+PouchDB作一个本地的ToDoList

首先在这里给你们拜个晚年，祝你们新年愉快，编程功力节节高升~~

我本身有制定年度规划的习惯，以前也一直在用OneNote在作。OneNote虽然好用，但是没有相关统计功能。这样就不容易把握计划制定的是否合理。因而就趁着放假，顺手作一个简单的ToDoList小程序。

需求分析

这个项目就先叫他EasyTodoList吧。不过先别急着动手，先利用脑图简单整理一下需求。这样既能够清楚地知道须要哪些东西以及从哪下手，也能够防止在作的过程当中歪楼。

技术选择

技术方面Vue和vue-router相信不会有什么问题，毕竟是如今的主流之一。因此这一次的主要问题是在存储的选择上。

首先，先去掉MySQL和MongoDB，由于这仅仅只是一个小项目，数据量也不是很大。所以没有必要上后端的东西。 那么剩下就是客户端存储了。在客户端存储中，storage只能进行简单的key-value存储，没有查询和统计的功能；而WebSQL虽然用起来很爽，但已是不在维护的项目了，因此也不推荐使用了；最后就是IndexedDB了，IndexedDB是目前比较推荐的客户端存储技术了。相似于MondgoDB的NoSQL数据库。由于原生API相对繁琐，为了简化开发，这里就使用二次开发的PocuhDB来做为客户端存储（API调用很简单，参考一下官网就能搞定）。（关于客户端存储的相关内容能够查看我以前的文章客户端存储技术）

须要注意的是，IndexedDB也是客户端存储的一种，天然也有客户端存储的特性。那么当改变浏览器或者改变监听端口时，以前存储的数据天然也就消失不见了（至关于从新换了个数据库），这在使用上或多或少带来了不便。

效果展现

先来看一下最终作出来的效果。

整个项目比较简单，只有总览以及任务列表两个页面。在添加了任务分类以及分类下的任务后，在总览页面就会有相关统计。在设置任务完成后，也会统计完成与未完成的任务的比例以及图表。图表部分是用Echarts来进行绘制的，绘制的方法也能够参考官方文档。

由于代码量很少也就不在这里多啰嗦了。详细代码能够来个人GitHub上参观指导。 项目地址：EasyTodoList

总结

整个项目在技术上没有难点，是个很容易撸的项目。结合了前端存储（IndexedDB），虽然简化了开发也带来了使用上的不便。不过做为一个练手的项目应该是比较不错的了。由于存储的问题很是尴尬，因此接下来考虑移植到Electron上，直接作成一个App来避免这个问题。