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 结构

在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删除数组元素