第十节：基于Vuex实现数据的增删改查的案例剖析分享
一. 需求/技术分析
1. 需求分析
(1).实现默认数据的加载，可以分类显示全部、未完成、已完成的数据。
(2).可以添加新数据、删除列表数据。
(3).点击可以选中 和 取消选中，实时显示多少条未选中。
(4).清除已完成
2. 技术分析
使用Vuex对数据统一管理，state维护数据，mutations声明方法，actions声明异步方法(axios获取数据)，getters对数据进行再处理。
二. 案例实现
1. 创建含有Vuex的项目
创建步骤可参考图形化界面的创建模式：https://www.cnblogs.com/yaopengfei/p/14506321.html
创建的过程中需要选中Vuex这一项：
2. 导入三方包
(1). 安装 ant-design-vue，【npm i ant-design-vue -S】， 然后在main.js中进行引入
// 1. 导入 ant-design-vue 组件库 import Antd from 'ant-design-vue' // 2. 导入组件库的样式表 import 'ant-design-vue/dist/antd.css' // 3. 安装组件库 Vue.use(Antd)
(2). 安装axios，【npm i axios -S】，然后在vuex对应的index.js页面中进行引入
// 引入axios import axios from 'axios'
3. 修改部分配置
(1). 配置端口，新建vue.config.js文件
module.exports = { devServer: { port: 8087, open: true } }
(2). 忽略ESLint校验，新增 .eslintignore文件
*.vue
*.js
4. Vuex核心代码
index.js
import Vue from 'vue' import Vuex from 'vuex' // 引入axios import axios from 'axios' Vue.use(Vuex) export default new Vuex.Store({ state: { //所有任务列表 list: [], //文本输入框中的值 inputValue: 'xxx', nextId: 5, viewKey: 'all' }, mutations: { // 1.初始化数据 initList(state, myData) { state.list = myData }, // 2.赋值文本框数据 setInputValue(state, myData) { state.inputValue = myData }, // 3.添加列表项 addItem(state) { const obj = { id: state.nextId, info: state.inputValue.trim(), done: false } state.list.push(obj); state.nextId++; state.inputValue = ''; }, // 4. 删除列表项(根据id) removeItem(state, id) { // 根据id查找索引 const i = state.list.findIndex(x => x.id === id); if (i != -1) { state.list.splice(i, 1); } }, // 5. 修改列表项状态 changeStatus(state, param) { const i = state.list.findIndex(x => x.id === param.id); if (i !== -1) { state.list[i].done = param.status; } }, // 6. 清除已经完成任务 cleanFinsh(state) { state.list = state.list.filter(x => x.done === false); }, //7. 修改视图关键字 changeViewKey(state, key) { state.viewKey = key; } }, actions: { getList(context) { // data这里解构赋值 axios.get('/list.json').then(({ data }) => { console.log(data); context.commit('initList', data); }) } }, getters: { // 1.统计未完成任务的个数 unDoneLength(state) { return state.list.filter(x => x.done === false).length; }, // 2.处理数据分类 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 } } })
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' // 3. 安装组件库 Vue.use(Antd) Vue.config.productionTip = false new Vue({ store, render: h => h(App) }).$mount('#app')
5. 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="cleanFinsh">清除已完成</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(['list', 'inputValue', 'viewKey']), ...mapGetters(['unDoneLength', 'infolist']) }, methods: { // 1. 监听文本框内容变化 handleInputChange(e) { // console.log(e.target.value) this.$store.commit('setInputValue', e.target.value) }, // 2. 向列表中添加数据 addItemToList() { if (this.inputValue.trim().length <= 0) { return this.$message.warning('内容不能为空'); } this.$store.commit('addItem'); }, // 3.删除列表数据 removeItemById(id) { this.$store.commit('removeItem', id); }, // 4.监听复选框状态变化事件 cbStatusChanged(e, id) { const param = { id: id, status: e.target.checked } this.$store.commit('changeStatus', param) }, // 5.修改页面上的展示数据 changeList(key) { this.$store.commit('changeViewKey', key) }, // 6.清除已完成的任务 cleanFinsh() { this.$store.commit('cleanFinsh'); } }, } </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>
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
