业务实现:
- 可添加任务
- 根据id删除对应的任务事项
- 清除列表中已完成的任务
- 统计未完成的任务的条数
-
修改页面上展示的数据列表(全部、未完成,已完成)
页面最终效果
创建vuex项目,安装相关依赖:(axios、ant-design-vue(UI库))
- npm install axios
- npm install ant-design-vue@1.x 、
基本代码素材:
main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
//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({
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 class="footer" slot="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: [
{
id: 0,
info: "Racing car sprays burning fuel into crowd.",
done: false
},
{
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
},
],
};
},
};
</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>
完整代码:
main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
//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:'',
//下一个id
nextId:5,
//选择框
viewKey:'all'
},
mutations: {
initList(state,list){
state.list=list
},
//为store中的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++
state.inputValue=''
},
//根据id删除对应的任务事项
removeItem(state,id){
//根据id查找对应项的索引
const i=state.list.findIndex(x=>x.id===id)
//根据索引,删除对应元素
if(i!==-1){
state.list.splice(i,1)
}
},
//修改列表项选中状态
schangeStatus(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((res) => {
console.log(res.data);
context.commit('initList',res.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)
}
if(state.viewKey==='done'){
return state.list.filter(x=>x.done===true)
}
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="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 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">清除已完成</a>
</div>
</a-list>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
export default {
name: "app",
data() {
return {
};
},
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')
},
//根据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('schangeStatus', param)
},
//清除已完成的任务
clean() {
this.$store.commit('cleanDone')
},
//修改页面上展示的数据列表
changeList(key) {
// console.log(key);
this.$store.commit('changeViewKey', key)
}
},
created() {
this.$store.dispatch('getList')
},
computed: {
// ...mapState(['list', 'inputValue', 'viewKey']),
...mapState([ 'inputValue', 'viewKey']),
...mapGetters(['unDoneLength','infoList'])
}
};
</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>