一，使用cli初始化项目，然后安装axios运行依赖和ant-design-vue
入口文件main.js:
import Vue from 'vue'
import App from './App.vue'
// 1. 导入 ant-design-vue 组件库
import Antd from 'ant-design-vue'
// 2. 导入组件库的样式表
import 'ant-design-vue/dist/antd.css'
import store from './store/index.js'
Vue.config.productionTip = false
// 3. 安装组件库
Vue.use(Antd)
new Vue({
render: h => h(App),
store
}).$mount('#app')
根组件APP.vue：
<template>
<div id="app">
<a-input placeholder="请输入任务" class="my_ipt" />
<a-button type="primary">添加事项</a-button>
<a-list bordered :dataSource="list" class="dt_list">
<a-list-item slot="renderItem" slot-scope="item">
<!-- 复选框 -->
<a-checkbox>{
{item.info}}</a-checkbox>
<!-- 删除链接 -->
<a slot="actions">删除</a>
</a-list-item>
<!-- footer区域 -->
<div slot="footer" class="footer">
<!-- 未完成的任务个数 -->
<span>0条剩余</span>
<!-- 操作按钮 -->
<a-button-group>
<a-button type="primary">全部</a-button>
<a-button>未完成</a-button>
<a-button>已完成</a-button>
</a-button-group>
<!-- 把已经完成的任务清空 -->
<a>清除已完成</a>
</div>
</a-list>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
list: []
}
},
created(){
this.$store.dispatch('getList')
}
}
</script>
<style scoped>
#app {
padding: 10px;
}
.my_ipt {
width: 500px;
margin-right: 10px;
}
.dt_list {
width: 500px;
margin-top: 10px;
}
.footer {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
vuex文件：
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
getList(context){
axios.get('/list.json').then(({
data:res})=>{
console.log(res)
})
}
},
modules: {
}
})
二，使用axios获取数据
第一步创建数据：
第二步：在store的Action创建函数，利用axios请求，获取json中的数据：
然后在组件中调用这个异步函数，发起请求，获取数据。
三，将取到的数据存储在store的state中，完成页面的渲染
也就是 异步操作，需要让Action中函数调用mutation中函数，才能完成对state中数据的操作。
这时候，state中已经存储了axios请求取得的数据。就可以在组件中进行调用，以及渲染了：
四，将输入框的内容添加到列表
第一步：先为添加按钮绑定事件
第二步：在本组件中定义函数，用来调用store的mutation中的函数：
第三步：在mutation中定义addItem函数：
从这里也可以体会到，vue的开发，是数据驱动的，我们添加了一个数组元素进list,页面就会多渲染出一个数据。而不是像之前操作DOM一样，需要创建一个新的节点。
五，删除对应的元素
第一步：给删除按钮绑定删除事件：
因为这里是作用域插槽。所以可以传入id值
第二步：在组件中定义函数，调用store中的mutation中的函数：
第三步：在mutation中定义这个函数，完成对list的删除元素操作
六，复选框的属性绑定
第一步：修改json文件，让我们有一两个是初始就选中的：
第二步：数据绑定到页面：
因为之前已经把store中的list映射成本组件的计算属性了，而且这里利用了作用域插槽，所以可以直接属性绑定：
七，点击复选框可以完成状态的切换
因为我们的数据是从json文件中读取出来的，但是暂时我们没办法修改json的文件内容，然而可以修改读取到的list数组中的数据。
也就是说，我们要做的事情是，点击复选框的时候，完成这个数组中对应对象的done属性的true和false切换。
第一步：为 复选框的状态变化绑定事件：
第二步：在本组件中定义函数，用以调用对应的mutattion内的函数
第三步：在mutation中定义这个函数，完成对list的操作
八，几条数据剩余的记录
要得到这个未选中的数据条数，最简单的方法就是使用filter方法，获取没选中的数据，组成新数组，然后测它的数组长度就可以了。
并且，这个数据的变动因为是复选框的状态值发生变化导致的，所以呢，这个部分的代码可以写在改变复选框的状态代码下，但是这样写的话，还要从stete中定义一个存储剩余条数的变量，然后再映射到组件，很麻烦。
鉴于是这个剩余数量是统计list的条数而获得的，所以，这里可以直接用getters，获取剩余条数，直接映射到组件中使用：
第一步：在store中创建getters：
第二步：映射到本组件
第三步：在本组件中直接使用
九，清除已完成的任务
点击清除已完成的任务时，会遍历list数组，然后从list中删除选中的
第一步：为清除已完成的任务绑定事件
第二步：定义事件，去调用mutation中的事件
第三步：在mutation中定义事件，完成对list的操作
十，点击tab，显示不同样式的实现
第一步：三个选项应该绑定同一个事件，各自传入不同flag
第二步：定义事件，调用mutation中的函数
第三步：定义state中对应的数据和mutation中的函数
第四步：将flag映射到组件
第五步：属性绑定，完成页面的渲染
十一，列表数据的切换
只要在点击的时候，同样是判断flag，看选中的是那个tab，然后在getters中把list处理一下，再映射到组件使用，而不是直接映射：
