vuex任务栏练习

报错:
解决方法:使用ncpm install
安装依赖完成 > npm run serve 运行项目
① 动态加载任务列表数据
1. 初始化store.js 结构
2.
在main.js文件中,导入store.js文件,全局挂载 store对象
接口请求数据:
打印了复杂的promise对象
解构赋值&简化promise对象
注意点:
1. 通过get请求拿到了原始的promise对象,使用 async&await拿到简化的promise对象
2. 解构赋值使用{data:res} data匹配查询 简化的promise对象里的data数据,匹配到赋值给res
提交前:
提交后:
不使用async&await
简化步骤:
1:箭头一个参数,省去小括号
2:对返回的数据解构赋值
3:{data:data} 命名一样,可以简写 > 4. {data}
undefined
原因: 1. 没使用async&await注明请求是异步的 2. 没有使用回调接收数据
function(res) 中的res接收返回的数据,使用then回调
导入mapState,使用计算属性


绑定数据源,遍历数据源
实现数据的双向绑定,和任务列表显示
② 实现文本框与store数据的双向同步

③ 完成添加任务事项的操作

打印出的数据为空,因为点击事件并没有监听到input表单的内容
解决方法:
为input表单绑定change事件,获取输入值

实现原理:
通过mutation方法操作state中的数据,通过change事件获取input输入值,使用commit调用mutation中方法,传入input值,从而改变state
④ 完成删除任务事项的操作
传递两个参数,第一个参数表示开始的位置,第二个参数表示要截取的个数;如果第二个参数为0,则表示不截取,返回的空数组,原来的数组不变 var arr = [2,4,6,7,8,9]; console.log(arr);//[2,4,6,7,8,9] var n = arr.splice(2,3);//表示从下标位置为2开始截取3个数 console.log(n);//[6, 7, 8] console.log(arr);//[2,4,9]
1.绑定删除事件,传入当前任务id
2. mutation 中,findIndex查找对比数组中的每一项id,找不到返回-1,找到后使用splice删除数组元素

解决:
重新定义change事件的函数
传入e事件对象,返回一个封装的新函数
顺利打印
关于mutation中方法传参,除了默认的state,只能再传一个参数,如果想传多个,得封装一个对象参数
mutations方法,第一个参数默认为state,第二个参数为方法传递的参数,没有第三个参数,如果要在方法中传递多个参数,将多个参数封装为对象,将对象作为第二个参数传递进去
优化:
使用forEach不可取,因为满足条件时还是遍历了每一个数组,遍历耗时
return并不会停止循环
改正:
箭头函数省去大括号不用return,带函数体时需要带return

切换时,接收changeList('key')传进来的值,调用mutation里的setViewKey方法

实现:使用过滤器遍历数组,将未完成的数组赋值给list


切换功能
效果图