Vuex实现todolist
一、todolist功能简介使用Vuex实现简单的todolist如下图所示:主要功能包括：添加事项： 在文本框中输入待办事项，点击添加事项按钮，将待办事项添加到列表中。删除事项： 待办事项列表中，点击每一项后面的删除，可以将对应的待办项删除。查看全部事项： 点击底部的全部按钮，列表显示的是全部的待办事项，包括已完成和未完成的。查看已完成事项： 点击每条事项前的复选框，可以标记此条事项为已完成或未
·
一、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组件：
<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="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>
<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(['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)
}
}
}
</script>
<style scoped>
#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;
}
</style>
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 = 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是实现组件全局状态（数据）管理的一种机制，可以方便地实现组件之间数据的共享。
xmind保存的时候软件崩溃了，赶紧截的一张图，凑合着看-_=|
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)