Vuex实战之 todos待办事项列表的状态管理

效果图：

注意： 使用的是vue-design-vue组件

main.js文件代码

import Vue from 'vue'
import App from './App.vue'
import store from './store'
//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)new Vue({store,render: h => h(App)
}).$mount('#app')

store.js文件代码

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'Vue.use(Vuex)export default new Vuex.Store({state: {//所有的任务列表list:[],inputValue:'aaa',nextId:0,viewKey:'all',},mutations: {initList(state,arr){state.list=arr},//为文本框中的inputValue赋值setInputValue(state,val){state.inputValue=val},//新增列表数据addItem(state){  state.nextId=state.list.length//给新增的id赋值const obj={id:state.nextId,info:state.inputValue.trim(),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)}},//复选框状态改变doneChange(state,par){const i=state.list.findIndex((x)=>x.id===par.id)if(i!==-1){state.list[i].done=par.done}},//清除已完成的任务cleanDone(state){state.list= state.list.filter(x=>x.done===false)},//切换页面上展示的数据changeViewKey(state,a){state.viewKey=a}},// axios发请求是异步操作
actions: {//获取数据（初始化）getList(context){axios.get('/list.json').then(({data})=>{context.commit('initList',data)})}},
getters:{//未选中的条数unDoneLength(state){return state.list.filter(x=>x.done===false).length},//切换页面上展示的数据tempList(state){if(state.viewKey==='undone'){return state.list.filter(x=>x.done===false)//等同于return state.list.filter(x=>!x.done)}else if(state.viewKey==='done'){return state.list.filter(x=>x.done===true)}else if(state.viewKey==='all'){return state.list}return state.list  }},modules: {}})

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="tempList" class="dt_list"><a-list-item slot="renderItem" slot-scope="item"><!-- 复选框 --><a-checkbox :checked="item.done" @change="(e)=>{changeChecked(e,item.id)}">{{ item.info }}</a-checkbox><!-- 删除链接 --><a slot="actions" @click="deleteItem(item.id)">删除</a></a-list-item><!-- footer区域 --><div class="footer" slot="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" style="color:green">清除已完成</a></div></a-list></div>
</template><script>import {mapState,mapGetters} from 'vuex'
export default {name: "app",data() {return {};},computed:{...mapState(['list','inputValue','viewKey']),...mapGetters(['unDoneLength','tempList'])},methods:{//监听文本框内容变化handleInputChange(e){//console.log(e.target.value)//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')},deleteItem(id){this.$store.commit('removeItem',id)},//监听复选框选中状态changeChecked(e,id){const par={id:id,done:e.target.checked //e.target.checked可以直接拿到复选框的选中状态}this.$store.commit('doneChange',par)},//清除已完成的任务clean(){this.$store.commit('cleanDone')},//切换页面上展示的数据changeList(a){this.$store.commit('changeViewKey',a)}},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>

数据文件：list.json文件

[{"id": 0,"info": "Racing car sprays burning fuel into crowd.","done": true},{"id": 1,"info": " Japanese princess to wed commoner.","done": false},{"id": 2,"info": "Australian walks 100km after outback crash.","done": false},{"id": 3,"info": "Man charged over missing wedding girl.","done": false},{"id": 4,"info": "Los Angeles battles huge wildfires.","done": false}
]

代码目录：

Vuex实战之 todos待办事项列表的状态管理相关推荐

小狗钱钱_✅每次构建待办事项列表应用程序时，都会有一只小狗？死了？
小狗钱钱 by Hrishi Mittal 由Hrishi Mittal ✅每次构建待办事项列表应用程序时,都会有一只小狗 ? 死了? (✅ Every time you build a to-do ...
mysql待办事项表名_SSD8-Ex4待办事项列表答案参考
[实例简介] SSD8-Ex4待办事项列表答案参考:http://wangbaiyuan.cn/mysql-database-data-released-in-java-web-service-and ...
html首页我的待办,JavaScript / HTML中的待办事项列表
我已经设置了这个待办事项列表,几乎所有东西都完美无缺.但是,如果我删除列表中的所有内容.它不会让我添加一个新的条目,我似乎无法弄明白为什么.只要我在列表中至少有一个条目,它就可以正常工作. 非常感谢任 ...
mysql待办事项表名_Activiti中彻底解决待办事项列表查询复杂、API不友好的设计方案...
标签: 我们使用工作流引擎,一个非常重要的功能就是获取待办事项列表,在Activiti中,我们可以通过TaskService的相关API进行查询,这些API设计优雅,但是实际使用中往往不够方便,也缺乏 ...
emacs .emacs_使用Emacs进行社交并跟踪您的待办事项列表
emacs .emacs 去年,我为您带来了19天的2019年新(给您)生产力工具.今年,我采用了不同的方法:使用您可能会使用的工具构建一个环境,使您在新的一年中提高生产力或可能尚未使用. 使用Ema ...
ToDoList—最简单的待办事项列表（经典案例）重点
代码运行结果案例说明案例分析案例实现代码 tdlist.html代码 <!DOCTYPE html> <html><head><meta http-eq ...
html待办事项表格代码,jQuery待办事项列表
我使用jQuery(和JS当然)编写的简单待办事项列表. 我已经创建了静态待办事项列表,只有通过编辑代码才能添加新项目.从逻辑上讲,我现在要创建一个动态列表.jQuery待办事项列表我已经尝试了一些 ...
待办事项列表应用程序Vikunja
杨浦区防控办昨天傍晚发布了『告杨浦居民书(二十二) 』,本周一.三.五.日晚间开展全区全员核酸筛查.比上周少了 2 次,说明情况应该是有所好转. 什么是 Vikunja ? Vikunja (/vɪ ...
html待办事项表格代码,Go For It ，一个灵活的待办事项列表程序
导读 Go For It,是我们开源工具系列中的第十个工具,它将使你在 2019 年更高效,它在 Todo.txt 系统的基础上构建,以帮助你完成更多工作. 每年年初似乎都有疯狂的冲动想提高工作效率. ...
hyperapp 共享_使用Hyperapp（1KB JS微框架）构建待办事项列表
hyperapp 共享在本教程中,我们将使用Hyperapp构建待办事项列表应用程序. 如果您想学习函数式编程原理,但又不想陷入细节,请继续阅读. Hyperapp现在很热门. 它最近在GitHub ...

Vuex实战之 todos待办事项列表的状态管理

Vuex实战之 todos待办事项列表的状态管理

效果图：

main.js文件代码

store.js文件代码

app.vue文件代码

数据文件：list.json文件

Vuex实战之 todos待办事项列表的状态管理相关推荐

最新文章

热门文章