在vue2项目中用vuex实现一个可增删的任务栏（三）

五、实现删除功能

1. 为删除链接绑定一个点击事件，传递对应的 id 到 methods

2. 创建一个新方法接收删除链接传来的 id ，然后调用 index.js 中的 mutations 节点下的 removeItem函数

 

3. 根据 App.vue 传来的 id ，在 state 中的 list 数组查找对应的任务事项，如果找到了，就删除该项。

 

完成！

 

六、实现复选框状态的绑定

在复选框中和 done 属性绑定

done 属性是控制复选框状态的

 

 成功！

 

七、修改任务完成状态

1. 在复选框中定义一个 checked，当状态改变时就触发箭头函数

 2. 接收 id和事件对象e ，并新建一个 param 存放 id 和 最新状态，最后调用 mutations 中的 changeStatus 方法

 3. 根据传来的 id 在 state 中找到对应的事项，把状态修改为最新状态

 成功！

八、统计未完成的任务条数

 1. 在 index.js 中新建一个 getters ，在里面写一个 unDoneLength 方法，用 filter 来过滤出未完成的条数

 

 2. 在 App.vue 中引入Getters，并在计算属性中写入 unDoneLength，让其可以作为一个函数直接使用

 3. 用插值表达式替换掉原来的 0

成功！