哔哩哔哩: 哔哩哔哩vuex的学习
参考博主文档: vuex的快速上手
App.vue
<template>
<div id="app">
<a-input
placeholder="请输入任务"
:value="inputValue"
@change="handleInputChange"
class="my_ipt"
/>
<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="cbStatusChanged($event, 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="clear">清除已完成</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) {
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 params = {
id,
status: e.target.checked,
}
this.$store.commit('changeStatus', params)
},
// 清除已完成
clear(){
this.$store.commit('clearDone')
},
// 修改页面上案例的高亮效果
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>
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({
render: h => h(App),
store
}).$mount('#app')
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: 'aaa',
// 下一个ID
nextId: 5,
viewKey: 'all'
},
mutations: {
initList(state, list) {
state.list = list
},
// 重新为InputValue赋值
setInputValue(state, value) {
state.inputValue = value
},
// 添加列表项目
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) {
// 1.根据id查找对应项的索引
const i = state.list.findIndex(item => item.id === id)
// 2.根据索引,删除对应的元素
if (i != -1) {
state.list.splice(i, 1)
}
},
// 根据id 修改列表项的选中状态
changeStatus(state, params) {
// 1.查找索引
const index = state.list.findIndex(item => item.id === params.id)
// 2.根据索引修改列表项的状态
if (index != -1) {
state.list[index].done = params.status
}
},
// 清除已完成的任务
clearDone(state) {
state.list = state.list.filter(item => item.done == false)
},
// 修改视图的关键字
changeViewKey(state, key) {
state.viewKey = key
}
},
actions: {
// 请求列表数据
getList(context) {
// 解构赋值
axios.get('/list.json').then(({ data }) => {
console.log(data);
context.commit('initList', data)
})
}
},
modules: {
},
getters: {
//统计为完成任务的条数
unDoneLength(state) {
return state.list.filter(x => x.done == false).length
},
// 根据 viewkey 返回不同的数据,切换显示 全部、已完成、未完成
infoList(state) {
if (state.viewKey == 'all') {
return state.list
}
if (state.viewKey == 'undone') {
return state.list.filter(item => item.done == false)
}
if (state.viewKey == 'done') {
return state.list.filter(item => item.done == true)
}
return state.list
}
}
})
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": true
},
{
"id": 3,
"info": "Man charged over missing wedding girl.",
"done": false
},
{
"id": 4,
"info": "Los Angeles battles huge wildfires.",
"done": false
}
]