让我们用vuex来做一下这个代办案例

完成图

功能分析详细讲解图:

首先新建三个子组件与一个父组件,再创建一个store文件夹里面存放vuex.js文件

1.功能1--新增:--> 通过创建变量与使用v-mode,监听enter键回车 (TodoHeader)

2.功能2-->删除:-->绑定点击事件,通过传递数组id来进行删除 (TodoMain)

3.功能3-->总计计算显示:-->直接插进去{{ $store.state.list.length }} (TodoFooter)

4.功能4-->:动态双向绑定选中 (TodoMain)

5.功能5-->:动态双向绑定全选功能 (TodoHeader)

6.功能6-->:点击一键清除已完成功能 (TodoFooter)

7.功能7-->:数据切换功能 (TodoFooter)

切换后将新数组渲染替换旧数组

8.功能8-->:数据保存本地内存localStorage