我用过一些列表类的应用，比如WunderList、GoogleKeep等，记录了一些计划和安排，也试着把自己的计划和安排连同笔记整理在印象笔记。但不管用哪种方法，总觉得少了点什么。如果能把两者的一些功能结合起来就完美了。“todo”和“note”的关系非常微妙。“待办事项”写得越详细，不就成了“笔记”吗？于是自己写了一个稍微复杂一点的列表程序，今天就把这个项目总结到这里。我尝试把todo和note结合起来，可以像WunderList一样记录计划，像Evernote一样管理笔记。开发过程中反复调整修改，最后发现：其实我只是做了一个支持markdown的WunderList简易版:(。不管怎样，坚持下去还是值得鼓励的。前后端整个项目的代码是分开的，后端实现不在里面介绍了前端代码地址，后端代码地址，在线预览，接下来简单介绍一下simplelist的前端实现过程。注意下面描述的一些过程不是一蹴而就的，而是通过反复修改和安排得来的，比如技术选型和组件的划分。实现确定接口确定技术实现的解决方案功能和接口先抛开功能和接口，介绍技术采用的校准解决方案。其实没什么好介绍的。前端老司机的套路很多，但主流的套路就那么几个。我选择“RoutineのVue”。Vue+Vuex+Vue-Router，还有Less、Webpack等其他配件大家应该都清楚了。用户登录注册和接口实现，本文不做介绍。讨论中，下次再说。组件划分是关键。在React的组件化划分方式中，组件分为两种：ContainerComponentsandPresentationalComponents，容器组件和UI组件。容器组件负责数据和业务逻辑的处理。承载相关的内部状态，与数据进行频繁的交互。UI组件只负责UI渲染，不做任何数据和逻辑处理。组件数据从容器组件传入（在React中，数据由this.props提供）。如果一个组件同时具有UI和业务逻辑，请尝试将其拆分为两个：包装UI组件的容器组件。前者负责与外界通信，向后者传递数据，后者渲染视图。我个人比较喜欢这种方法，成分变纯了。但是，在Vue生态中似乎并没有对设计的介绍。打算以后尝试用这个方法，不过现在还是用比较粗略的方法来划分。这是奇妙清单的界面。经过简单的分析，可以分为以下几种形式。更多详细信息，您可以参见下图。如果硬要用容器组件和UI组件的形式开发，相对来说比较复杂，我选择Easytostarted。想必你应该看过TodoMVC，而这就是simplelist最简单也是最核心的功能。所以在实际操作过程中，我先实现了输入框和单个任务这两个组件。VuexVuex是专门为Vue.js应用设计的集中式状态管理框架。它借鉴了Flux和Redux的设计思想，但是简化了概念，采用了专门设计的实现，更好的发挥了Vue.js的数据响应机制。单独使用Vue.js时，状态通常存储在组件内部。整个应用的数据和状态分散在各个组件中。这样是没有问题的，组件的数据是自己管理的。有时部分状态需要与其他组件共享。这时候，事件系统就是用来让一个组件“发送”一些状态给其他组件的。但是当项目一步步扩大时，事件流会变得复杂，不利于调试和维护。此时Vuex可以帮助我们实现状态管理。Vuex的四个核心概念是：状态树：Vuex使用一棵单一的状态树，它包含一个对象的所有应用程序级状态，并作为“单一数据源（SSOT）”存在。每个应用程序将只包含一个商店实例。单状态树让我们可以直接定位到任何特定的状态片断，并且可以在调试时轻松获取整个当前应用状态的快照。数据流是单向的。Getters：用于从store中获取Vue组件数据。Mutators：事件处理程序用于驱动状态更改，只有mutations可以更改状态。Actions：组件可以用来调度Mutations的函数。Vuex规定属于应用层的状态只能通过Mutation中的方法进行修改，Mutation中的事件只能通过action进行派发。从组件开始，组件调用动作。在action层面，我们可以和后台数据进行交互，比如获取初始化数据源，或者过滤中间数据等，然后在action中dispatchMutation。触发状态更改的突变，这将触发视图更新。有了Vuex这样的数据管理架构，我只需要关心组件的状态变化，所有的数据变化和流转都交给Vuex。我需要维护一个数组，数组中的每个元素代表一个任务，编辑、删除输入框和任务等操作本质上都是对数组的操作。给任务添加分类我已经说过了，我要做的是一个复杂的simplelist。所以，在完成最简单的增删改查功能后，还需要添加任务自身的属性。每个任务都属于一个列表，并具有唯一的列表ID(list_id)。就像WunderList，左边是检查清单，右边是任务清单。现在是在单页引用中使用基本路由设备的时候了。从简单开始，除了登录和注册（目前集成在应用中，更好的做法应该是登录和注册作为两个单独的页面，这里只是个人demo，暂时不考虑），只有一个暂时的路由状态。指向对应的列表，例如：/lists/:id。以下是伪代码
