vuex任务栏练习

1. 初始化项目
实现步骤
① 通过 vue ui 命令打开可视化面板,创建新项目 vuex-demo2
② 安装 vuex 依赖包 npm install vuex axios ant-design-vue –S
③ 实现 Todos 基本布局(基于已有样式模板)
 
2. 完成具体功能
① 动态加载任务列表数据
② 实现文本框与store数据的双向同步
③ 完成添加任务事项的操作
④ 完成删除任务事项的操作
⑤ 动态绑定复选框的选中状态
⑥ 修改任务事项的完成状态
⑦ 统计未完成的任务的条数
⑧ 清除已完成的任务事项
⑨ 实现任务列表数据的动态切换
 
 
项目准备:
此时项目没有node-moudle依赖包,可以run install 下载

 

 

报错:

解决方法:使用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数据的双向同步

 

 


③ 完成添加任务事项的操作
解析:
添加一条任务到数据源list,然后回显
步骤:
store.js里mutations中
setInputValue(state,val):将输入框的值存入state.inputvalue中
 
inputvalue值通change事件监听,e.target.value获取;
addItem(state):设置一个obj对象,绑定获取的inputvalue值,push添加到state.list数组中 
 

 

 

 

打印出的数据为空,因为点击事件并没有监听到input表单的内容

 

 

 解决方法:

为input表单绑定change事件,获取输入值

 

 


 

 实现原理:

通过mutation方法操作state中的数据,通过change事件获取input输入值,使用commit调用mutation中方法,传入input值,从而改变state

优化:
state.list数据结构是 obj:{id,info,done},所以每次添加需要保证这些属性值是完整的
id:因为已经有5条数据了,所以下一个id索引是5
info: 就是当前的inputvalue值(从vue模板获取)
done: 默认false
 
添加完,清空输入值

 

 

 ④ 完成删除任务事项的操作

state.list.splice(i, 1): 删除当前数组元素
 传递两个参数,第一个参数表示开始的位置,第二个参数表示要截取的个数;如果第二个参数为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事件,接收复选框传入的id和done,包装成对象prarms,调用mutation的方法changeStatus,传入prarms
mutation根据id查找list数组中符合的item项,使用findIndex返回一个索引号,根据索引号,修改state.list某一项
 
 
获取复选框状态失败:
@change="cbStatusChanged(e, item.id) 传参数失败
 

 

 

 解决:

重新定义change事件的函数

传入e事件对象,返回一个封装的新函数

顺利打印

 

 

 关于mutation中方法传参,除了默认的state,只能再传一个参数,如果想传多个,得封装一个对象参数

mutations方法,第一个参数默认为state,第二个参数为方法传递的参数,没有第三个参数,如果要在方法中传递多个参数,将多个参数封装为对象,将对象作为第二个参数传递进去

 

 

优化:

使用forEach不可取,因为满足条件时还是遍历了每一个数组,遍历耗时

return并不会停止循环

 

 改正:

箭头函数省去大括号不用return,带函数体时需要带return

 

 

 

 


 

⑥ 修改任务事项的完成状态
即显示按钮状态,默认是“全部”高亮显示
实现:
state中设置关键字属性viewKey:'all',通过关键词判断按钮状态
全部/未完成/完成  有自己的关键字时,三元表达式判断显示按钮效果

 

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

 

 

 
⑦ 统计未完成的任务的条数
对数据进行处理,使用getters
 
⑧ 清除已完成的任务事项

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

⑨ 实现任务列表数据的动态切换
使用计算属性

 

 

无法修改计算属性的值

 

 

 切换功能

 

 

 效果图

 

 

 

 

 

 

 

 

 

 

 

 

posted @ 2022-05-01 03:45  小章同学  阅读(91)  评论(0编辑  收藏  举报