//template
<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) => {
cbStatusCharged(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");
console.log(this.$store.state.list);
// console.log(this.list);
},
computed: {
...mapState(["list", "inputValue", "viewKey"]),
...mapGetters(["unDoneLength", "infolist"]),
},
methods: {
handleInputChange(e) {
this.$store.commit("SETINPUTVALUE", e.target.value);
},
addItemToList() {
if (this.inputValue.trim().length <= 0) {
return this.$message.warning("文本框内容不能为空");
}
this.$store.commit("ADDITEM");
},
removeItemById(id) {
console.log(id);
this.$store.commit("REMOVEITEMBYID", id);
},
cbStatusCharged(e, id) {
console.log(e);
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 {
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>
//store
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
list: [],
inputValue: '',
newxtId: 5,
viewKey: 'all'
},
mutations: {
INITLIST(state, list) {
state.list = list
},
SETINPUTVALUE(state, val) {
state.inputValue = val
},
ADDITEM(state) {
const obj = {
id: state.newxtId,
info: state.inputValue.trim(),
done: false
}
state.list.push(obj)
state.newxtId++
state.inputValue = ''
},
REMOVEITEMBYID(state, 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('../static/list.json').then(({ 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)
}
if (state.viewKey === 'done') {
return state.list.filter(x => x.done)
}
return state.list
}
}
})
最后附上gitee克隆地址
https://gitee.com/ouyangSingle/vuex-demo