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

九、实现“清除已完成”功能

1. 在a链接放一个点击事件 clean

2. 写一个对应的方法，触发点击事件时调用 mutations 中的方法

3. 把未完成的过滤出来，再重新赋值给 state 的 list 数组

 

 成功！

十、实现底部的三个按钮高亮状态可切换

 1. 在三个按钮加上判断高亮的三元表达式的属性绑定 和 点击事件（向方法里传递对应的 key 值）

 2. 新建对应方法，传递当前点击的按钮对应的key 值给 mutations 中的函数

 

3. 在state 中新建一个属性 viewKey,默认为 all

4. 将 viewKey 映射成当前组件的计算属性 

5. 在 mutations 中新建函数 changeViewKey,将接收的最新key 值赋值给 viewKey

 成功！

十一、实现列表数据的按需切换

1. 因为 getters 的作用是对数据进行包装，显示我们想看到的数据。所以在 getters 节点中新增一个函数，判断当前的 viewKey 值，从而返回对应的列表内容

 2. 因为原先绑定的数据源是 list，但是现在已经可以按需显示数据，所以删掉 list，在mapGetter中加上 infolist

 3. 修改数据源为 infolist

 成功！

 

 

 

 

到此，这个任务栏组件的所有功能已经都完成了！

大成功！！！