刘贵学博客

夯实Vue系列 Demo 10 综合实例 TodoList(数据库)

至此,我们的例子已经查不到了,最后我们再完成一个综合实例,将 Demo 6 结合 Demo 9,完成一个带数据库的TodoList。

代码分析(获取初始数据)

1. 整体流程

2. 组件监听items更新,并且调用 InitTodoItem Action

  • items 设为计算属性,如果变更自动 更新;
  • mounted 函数里 dispatch 一个 InitTodoItem

3. Action 里的逻辑

  • Action里执行 Axios 的get函数;
  • Axios.get成功后,将获取数据使用 commit 传入 mutation 的 initTodoItems;

运行结果

其他的动作 增加、删除、更新 的逻辑 请参考:

https://coding.net/u/guixue/p/vue-starter/git/tree/master/src/pages/10-todo-db