todos实例

• 数据可以放在public中
• 使用axios调用public中的json数据
• 把axios中的数据在vuex中用Action调用（axios是异步处理，所以需要用Action）
• action通过调用mutations来操作date

添加事项

1. 通过点击添加事项按钮，调用添加方法
2. 在添加方法中，先判断输入文本是否为空，为空则提示。不为空则调用mutations修改list
3. mutations中additem() 方法需要定义对应的属性，id、info、done。需要传入对应的值

删除事项

1. 通过点击删除按钮，调用删除方法并传id，根据id进行删除事项
2. 删除方法中，调用mutation中的removeItem 根据id 找到数组中对应的索引，然后根据索引删除对应项

修改事件状态

1. 首先对复选框添加change事件，事件中再定义一个箭头函数，可以获取到e和id，再传给方法
2. 在方法中获取到change事件传过来的e和id，可以通过e.target.checked 来获取到复选框的状态
3. 方法中定义一个对象，来保存e.target.checked和id，通过this.$store.commit调用mutation方法，并传入对象
4. 在store里，mutation定义方法，使用state.list.findIndex(x=>x.id===id)根据传入的id查找到对应的索引再使用state.list.done = param.statu修改复选框状态

统计未完成的任务数

1. 首先在store中的getters内定义方法，使用过滤器来过滤状态为未完成的个数，state.list.filter(x => x.done === false).length
2. 在组件中通过映射的方式，在计算属性中映射对应的方法，最后用插值表达式输出在 对应位置

清除已完成

1. 给按钮添加点击事件，通过事件调用mutation
2. 在mutation中使用过滤器，过滤到只剩下done为false的数，然后通过赋值给list达到刷新列表的功能

动态切换按钮的高亮效果

1. 首先给按钮定义相同的方法，并设置不同的参数，通过调用mutation传入参数到state中，
2. 在组件中通过映射的方式拿到state中的参数，再通过三元表达式判断对应的值并进行切换

切换按钮显示不同的值

1. 使用getters，定义方法，通过过滤info的值来获取对应list
2. 组件中通过映射，引入getters中的方法，使用插值引用

标签：调用,demo,list,对应,state,mutation,vuex,id,todos
来源： https://www.cnblogs.com/633Xcc/p/15757805.html