一、安装依赖

初始化样式，安装axios、命令行管理员（终端）安装ant-design-vue@1.3.10，更改App.vue和main.js;

npm i ant-design-vue@1.3.10
vue ui

二、全部代码

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'Vue.config.productionTip = false
//3、安装组件库
Vue.use(Antd)import store from './store.js'
new Vue({store,render: h => h(App)
}).$mount('#app')

store.js:
import Vue from 'vue'
import Vuex from 'vuex'
//导入axios,axios是异步操作，因此在actions中使用
import axios from 'axios'Vue.use(Vuex)export default new Vuex.Store({state: {//所有的任务数据列表list: [],//文本框的内容inputValue: 'aaa',nextId: 5,viewKey: 'all'},mutations: {initList(state,list) {state.list = list;},//更改inputValue的值setInputValue(state,val) {state.inputValue = val;},addItem(state) {const obj ={id: state.nextId,info: state.inputValue.trim(),done: false}state.list.push(obj);state.nextId++;  //序号自加1state.inputValue = '';  //添加后输入框重新为空},removeItem(state,id) {//1、根据id查找对应项的索引const i = state.list.findIndex(x => x.id === id);if(i !== -1) {  //找到了list中对应的事项//2、根据索引删除对应的事项state.list.splice(i,1);}},changeStatus(state,parm) {const i = state.list.findIndex(x => x.id === parm.id);if(i !== -1) {state.list[i].done = parm.done;}},cleanDone(state) {state.list = state.list.filter(x => x.done === false);},changeViewKey(state,key) {state.viewKey = key;}},actions: {//发起请求获取json数组,actions函数获得到的数据不能直接加载到state中，要通过mutations函数getList(context) {axios.get('/list.json').then(({ data }) => {// console.log(data);context.commit('initList',data);  //触发mutations函数})}},getters: {//统计未完成的条数unDoneLength(state) {return state.list.filter(x => x.done === false).length;},infoList(state) {if(state.viewKey === 'done') {return state.list.filter(x => x.done);}if(state.viewKey === 'unDone') {return state.list.filter(x => !x.done);}return state.list;}}
})

App.vue:
<template><div id="app"><a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handleInputChange" /><a-button type="primary" @click="addItemToList">添加事项</a-button><!-- <a-list bordered :dataSource="list" class="dt_list"> --><a-list bordered :dataSource="infoList" class="dt_list"><a-list-item slot="renderItem" slot-scope="item"><!-- 复选框 --><a-checkbox :checked="item.done" @change="(e) => {cbStatusChanged(e,item.id)}">{{item.info}}</a-checkbox><!-- 删除链接 --><a slot="actions" @click="removeItemById(item.id)" >删除</a></a-list-item><!-- footer区域 --><div slot="footer" class="footer"><!-- 未完成的任务个数 --><span>{{ unDoneLength }}条剩余</span><!-- 操作按钮 --><a-button-group><!-- primary有高亮样式 --><a-button :type="viewKey === 'all' ? 'primary' : 'default'" @click="changeList('all')">全部</a-button><a-button :type="viewKey === 'unDone' ? 'primary' : 'default'" @click="changeList('unDone')">未完成</a-button><a-button :type="viewKey === 'done' ? 'primary' : 'default'" @click="changeList('done')">已完成</a-button></a-button-group><!-- 把已经完成的任务清空 --><a @click="clean">清除已完成</a></div></a-list></div>
</template><script>
import { mapState,mapGetters } from 'vuex'export default {name: 'app',data () {return {}},created() {this.$store.dispatch('getList');},computed: {//切换下方三个按钮时，列表内容也会进行更换，因此不再需要使用mapState(['list'])了// ...mapState(['list','inputValue','viewKey']),...mapState(['inputValue','viewKey']),...mapGetters(['unDoneLength','infoList'])},methods: {//监听文本框内容的变化handleInputChange(e) {//拿到文本框最新的值:e.target.value// console.log(e.target.value);//触发mutations函数来更新inputValuethis.$store.commit('setInputValue',e.target.value);},//添加事项addItemToList() {//此时inputValue是计算属性，可以直接通过this来访问if(this.inputValue.trim().length <= 0) {//this.$message.warning方法弹出警告消息,该方法来源于组件库ant-designreturn this.$message.warning('文本框输入内容不能为空!');}this.$store.commit('addItem');},//根据id删除对应的事项removeItemById(id) {// console.log(id);this.$store.commit('removeItem',id);},cbStatusChanged(e,id) {// console.log(e);// console.log(e.target.checked);// console.log(id);const parm = {id: id,done: e.target.checked};this.$store.commit('changeStatus',parm);},//清除已完成的事项clean() {this.$store.commit('cleanDone');},//切换高亮changeList(key) {// console.log(key);this.$store.commit('changeViewKey',key);}}
}
</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>

文件夹结构

三、流程步骤

1、列表数据的动态加载

①在main.js中引入store。
②此时数据list是固定写好的，因此将App.vue中的list数据移到新创建的public/list.json文件下，App.vue中list中的数据为空；然后通过使用axios发起请求获得list.json中的数据，将数据挂载在Vuex的store中进行存储，因此在store下的index.js中导入axios并在actions中使用getList函数获取数据。但是该函数并没有被调用，因此在App.vue中声明生命周期函数created()，只要App.vue被渲染就会触发该函数。
③拿到数据之后，应该把数据放在state中进行存储，在state中定义一个列表list来存储获得的数据，但是actions函数不能直接更改state中的数据，要通过mutations函数来更改state中的数据。
④在App.vue中按需导入辅助函数mapState使state中list的数据变成App.vue下的一个计算属性。

2、文本输入框的双向同步

在store.js中的state下新定义一个数据节点inputValue，默认值为aaa。我们希望inputValue可以和文本输入框做双向数据绑定。再次通过mapState辅助函数将inputValue映射成计算属性，并在App.vue中使用动态绑定:value来实现双向绑定（文本输入框有属性value）。再为文本框绑定一个事件来监听文本框内容的变化，通过e.target.value拿到文本框的内容，再通过在mutations中创建一个函数将该值对state中的inputValue进行更改。

3、添加事项的操作

为该按钮绑定一个点击事件，首先先判断用户的输入内容是否为空，为空则弹出警告信息，否则则触发一个mutations函数，利用该mutations函数给list列表添加数据即表示添加事项成功。预先设定一个序号值nextId，在该mutations函数中，定义一个对象obj并分别给它的对象赋值，之后再进行添加，添加成功之后序号值自加1并把文本框输入内容清空。

4、删除功能

思想：给删除按钮添加单击事件，并在调用事件处理函数时把对应的事项id传回事件处理函数，再根据id在list中查找对应的索引，根据索引删除对应的元素，从而删除列表中对应的事项。

5、复选框状态的绑定

将复选框的勾选状态与数据list.json中的done的值相对应，因此使用动态绑定:checked="item.done"。

6、修改复选框的是否选定状态

给复选框添加一个change事件，点击后给事件处理函数返回点击后的选中状态和id，定义一个对象parm来保存该返回的选中状态和id，再根据id查找对应事项并修改它的选中状态的值。

7、统计未完成的条数

通过filter的过滤功能来统计未完成的事项并通过.length得到未完成的条数，再使用getters和mapGetters辅助函数把未完成的条数映射成一个计算属性，然后在结构中直接使用mustache语法展示即可。

8、清除已完成的任务功能

首先给该按钮添加一个单击事件，仍是通过filter过滤得到未完成的list，将该list直接赋值给state.list即可。

9、底部三个按钮的高亮切换

在state中新增一个数据节点viewKey，默认值为’all’，通过mapState辅助函数将它映射为计算属性。给三个按钮分别添加单击事件处理函数获得每个按钮自己的‘key’值，然后通过动态绑定:value并通过三元表达式分别得到属性值并触发mutations函数来更改state中viewKey的值。

10、列表数据的按需切换

在切换下方未完成、已完成按钮的同时，我们希望列表内容也可进行实时切换。因此，我们在getters中定于一个函数，该函数通过viewKey的值来使用filter函数来更新list，并通过mapGetters辅助函数映射为计算属性，再将之前动态绑定的数据list换成该计算属性即可。

Vuex实战项目—ToDoList代码及流程详解相关推荐

Android 12 开机动画代码与流程详解
开机动画分为三个部分: 第一个开机画面是在内核启动的过程中出现的,它是一个静态的画面,在默认情况下,这个画面是不会出现的. 第二个开机画面是在init进程启动的过程中出现的,它也是一个静态的画面. 第 ...
让别人远程访问你的代码网站项目或临时演示你的项目给客户的方式详解即外网局域网访问自己的项目
让别人远程访问你的代码网站项目或临时演示你的项目给客户的方式详解文章目录让别人远程访问你的代码网站项目或临时演示你的项目给客户的方式详解引言一.创建一个你想要别人访问的项目二.明确你想要将这 ...
OpenCV-Python实战（14）——人脸检测详解（仅需6行代码学会4种人脸检测方法）
OpenCV-Python实战(14)--人脸检测详解(仅需6行代码学会4种人脸检测方法) 0. 前言 1. 人脸处理简介 2. 安装人脸处理相关库 2.1 安装 dlib 2.2 安装 face_r ...
Tomcat 项目代码上线步骤详解
Tomcat 项目代码上线步骤详解 1.上线内容(JSP代码,图片,包文件(jar|war|ear)) 2.上线内容来源 a.开发人员提供(邮件形式).tar.gz 压缩包(包文件开发负责编译编译命 ...
View的绘制-draw流程详解
目录作用根据 measure 测量出的宽高,layout 布局的位置,渲染整个 View 树,将界面呈现出来. 具体分析以下源码基于版本27 DecorView 的draw 流程在<Vi ...
OpenCV-Python实战（17）——人脸识别详解
OpenCV-Python实战(17)--人脸识别详解 0. 前言 1. 人脸识别简介 2. 使用 OpenCV 进行人脸识别 2.1 使用 OpenCV 进行人脸识别流程示例 3. 使用 dlib ...
无人机航测流程详解：航线规划、像控点布设、CC刺点建模及CASS成图
无人机航测是传统航空摄影测量手段的有力补充,具有机动灵活.高效快速.精细准确.作业成本低.适用范围广.生产周期短等特点,在小区域和飞行困难地区高分辨率影像快速获取方面具有明显优势,随着无人机与数码相机 ...
jenkins插件调用job_Jenkins迁移job插件Job Import Plugin流程详解
Jenkins迁移job插件Job Import Plugin流程详解由于又开了新机器所以又要重新布置Jenkins从老项目拷贝过来,发现Job Import Plugin 这个插件更新了,和以前的 ...
【联机对战】微信小程序联机游戏开发流程详解
现有一个微信小程序叫中国象棋项目,棋盘类的单机游戏看着有缺少了什么,现在给补上了,加个联机对战的功能,增加了可玩性,对新手来说,实现联机游戏还是有难度的,那要怎么实现的呢,接下来给大家讲一下. 考虑到 ...

Vuex实战项目—ToDoList代码及流程详解

ToDoList实战