一、todolist功能简介
使用Vuex实现简单的todolist如下图所示:
主要功能包括：
添加事项：在文本框中输入待办事项，点击添加事项按钮，将待办事项添加到列表中。删除事项：待办事项列表中，点击每一项后面的删除，可以将对应的待办项删除。查看全部事项：点击底部的全部按钮，列表显示的是全部的待办事项，包括已完成和未完成的。查看已完成事项：点击每条事项前的复选框，可以标记此条事项为已完成或未完成状态，点击底部已完成按钮，查看复选框为选中状态的已完成事项列表。查看未完成事项：点击底部未完成按钮，查看复选框为未选中状态的事项列表。清除已完成：点击清除已完成，将已完成的事项从列表中清除。
二、项目构建
1-使用win+r快捷键调出终端，在终端输入vue ui打开vue项目管理器的图形化界面
文章图片
2-点击顶部的创建，选择合适的位置，点击底部的在此创建项目
文章图片
3-输入项目名为vuex-todolist,选择包管理器为npm，初始化git 仓库为init project，点击下一步。
文章图片
4-选择手动配置项目，然后点击下一步。
文章图片
5-手动配置一些功能，包括：Choose vue version、Babel、Vuex、Linter/Formatter、使用配置文件这五项，打开这五项后面的滑块开关，点击下一步。
文章图片
6-下拉选择ESLint+ Standard config，点击创建项目
文章图片
7-询问是否将刚才的配置保存为新的预设，可以不保存预设，直接创建项目。
文章图片
8-在磁盘位置找到项目文件夹，使用vscode打开，修改.eslintrc.js文件如下图所示，可以避免在编写过程中ESlint语法检查器一直报错导致编译不通过的问题。
文章图片
在项目的根目录下新建.prettierrc文件，设置在vscode格式化代码时，每一行不加分号，并且引号为单引号
文章图片
另外，在vue项目管理图形界面，安装两个运行依赖axios和ant-design-vue：
文章图片
三、功能实现
1.在
public文件夹下新建list.json文件：
文章图片
[
{
"id": 0,
"info": "复习线性代数",
"done": false
},
{
"id": 1,
"info": "运动半小时",
"done": false
},
{
"id": 2,
"info": "收拾书桌",
"done": false
},
{
"id": 3,
"info": "背英语单词",
"done": false
},
{
"id": 4,
"info": "完成高数每日一练",
"done": false
}
]
2.
src目录下的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'Vue.config.productionTip = false
// 3. 安装组件库
Vue.use(Antd)new Vue({
render: h => h(App),
store
}).$mount('#app')3.
src目录下的App.vue组件：
>
import { mapState, mapGetters } from "vuex"
export default {
name: 'app',
data() {
return {}
},
created() {
this.$store.dispatch('getList')
},
computed: {
...mapState(['inputValue', 'viewKey']),
...mapGetters(['undoneLength', 'infoList'])
},
methods: {
// 监听文本框内容变化
handleInputChange(e) {
console.log(e.target.value);
this.$store.commit('setInputValue', e.target.value);
},
//向列表中新增item项
addItemToList() {
if (this.inputValue.trim().length <= 0) {
return this.$message.warning('文本框内容不能为空！')
}
this.$store.commit('addItem', this.inputValue)
},
// 根据Id删除对应的任务事项
removeItemById(id) {
// console.log(id);
this.$store.commit('removeItem', id)
},
// 监听复选框选中状态变化的事件
cbStatusChanged(e, id) {
// 通过e.target.checked可以接收到最新的选中状态
// console.log(e.target.checked);
console.log(id);
const param = {
id: id,
status: e.target.checked
}
this.$store.commit('changeStatus', param)
},
// 清除已完成任务
clean() {
this.$store.commit('cleanDone')
},
changeList(key) {
console.log(key);
this.$store.commit('changeViewKey', key)
}
}
}
>
#app {
margin: 0 auto;
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;
}
3.src目录下store文件夹里的index.js文件：
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'Vue.use(Vuex)export default new Vuex.Store({
state: {
// 所有的任务列表
list: [],
// 文本框里的内容
inputValue: '',
//下一项任务的id
nextId: 5,
viewKey: 'all'
},
mutations: {
initList(state, list) {
state.list = list
},
// 为store中的inputValue赋值
setInputValue(state, inputValue) {
state.inputValue = https://www.it610.com/article/inputValue
},
//添加列表项
addItem(state) {
const obj = {
id: state.nextId,
info: state.inputValue,
done: false
}
state.list.push(obj)
state.nextId++
state.inputValue =''
},
// 根据Id删除对应的任务事项
removeItem(state, id) {
// 根据Id查找对应项的索引
const i = state.list.findIndex(x => x.id === id)
// 根据索引，删除对应的元素
if (i !== -1) {
state.list.splice(i, 1)
}
},
//修改列表项的选中状态
changeStatus(state, param) {
const i = state.list.findIndex(x => x.id === param.id)
if (i !== -1) {
state.list[i].done = param.status
}
},
// 清除已完成任务
cleanDone(state) {
state.list = state.list.filter(x => x.done === false)
},
changeViewKey(state, key) {
state.viewKey = key
}
},
actions: {
getList(context) {
axios.get('/list.json').then(({ data }) => {
console.log(data);
context.commit('initList', data)
})
}
},
// 统计未完成任务条数
getters: {
undoneLength(state) {
return state.list.filter(x => x.done === false).length
},
infoList(state) {
if (state.viewKey === 'all') {
return state.list
}
if (state.viewKey === 'undone') {
// return state.list.filter(x => x.done === false)
return state.list.filter(x => !x.done)
}
if (state.viewKey === 'done') {
// return state.list.filter(x => x.done === true)
return state.list.filter(x => x.done)
}
return state.list
}
},
modules: {
}
})四、小结
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便地实现组件之间数据的共享。【Vue|Vuex实现todolist】
文章图片
xmind保存的时候软件崩溃了，赶紧截的一张图，凑合着看-_=|
推荐阅读
- 前端|Html单选按钮自定义样式
- vue|实现文本内容是超链接时自动转换为超链接
- webpack|webpack插件篇
- 源码|第13期在线音乐网站前后分离springboot整合vue
- 源码|第14期家庭理财管理系统SSM
- 源码|个人博客系统+源码
- 昇腾CANN论文上榜CVPR，全景图像生成算法交互性再增强！
- vue.js|vue、element-ui、springboot前后端分离权限管理系统实战
- vue.js|学生信息管理 vue+Element UI+springboot 前后端分离