回顾博客代码
博客代码里面有三个列表：首页的博文列表、编辑博文里面的博文列表以及讨论列表。
三个列表的写了三份代码，但是对比看一下就会发现，这三份代码大同小异嘛。
其共同点就是：查询条件、分页要求、数据容器。
那么是不是可以针对这几个共同点抽象一下，做成一个共用的函数呢？
这个就需要用到轻量级状态里面的局部状态了。
为啥一定要用状态管理呢？那是因为可以把不同的功能分布到不同的组件里面，而不用拘泥在一个组件内实现全部功能。
比如把查询条件的表单放在单独的组件里面，这样可以简化列表组件的代码，更容易进行管理。
定义用于列表需求的局部状态
// store-ds/index.js import VuexDataState from'vue-data-state' // 设置全局状态和局部状态 exportdefault VuexDataState.createStore({ global: { // 全局状态 onlineUser: { // 当前登录用户 name:'jyk'// } }, local: { // 局部状态 // 数据列表，使用前需要先注册 dataListState() { // 显示数据列表的状态 return { // 确保不会重复 findKind: {}, // 查询方式，仅容器，不用写具体的查询字段 find: {}, // 查询关键字，还是容器 page: { // 分页参数 pageTotal: 100, pageSize: 2, pageIndex: 1, // 其实主要是用这个 orderBy: { id: false } // 排序字段，可以写多个 }, _query: {}, // 缓存的查询条件，翻页的时候使用 isReload: false// 重新加载数据，需要统计总数 } } }, init(state) { // 初始化 } })
- dataListState
定义一个数据列表用的状态，局部状态的优点就是可以在“多套”业务组件里复用，而且可以保证局部状态不会相互影响，博文列表组件、讨论列表组件都可以用这个状态，而不用定义多个。 - findKind
查询方式，这个只定义一个容器，具体的内容在后面的代码里面实现。 - find
查询关键字，记录用户输入的查询内容。具体内容还是在后面的代码里面实现。 - Page
分页信息，这里主要使用 pageIndex，其他的算是附赠吧，毕竟一般都是配套出现的。 - _query
缓存查询条件，用户进行查询的时候需要记录查询条件，然后翻页的时候就可以直接拿出来使用了。缓存起来也便于确定需要哪些查询条件。 - init
初始化状态，这个是给全局状态用的。
MVC 的 Control
然后我们可以借鉴MVC的思路，做一个control，控制model的加载、状态的变化等功能。建立一个 src/control 文件夹，统一管理相关的代码。
// control/data-list.js import { watch, reactive } from'vue' // 状态 import VueDS from'vue-data-state' // webSQL import { webSQLVue } from'nf-web-storage' // 获取配置 // eslint-disable-next-line import/no-absolute-path import blogListInfo from'/config/bloglist.config.json' /** * 数据列表的通用管理类 * * 查询条件 * * 分页信息 * * 加载数据 * * 注入局部状态 */ exportdefaultfunction dataListControl (jsonFlag) { // 显示数据列表的数组 const _dataList = reactive([]) // 访问 webSQL const { help } = webSQLVue.useHelp() // 访问状态 const { reg, get } = VueDS.useStore() // 子组件里面获取状态 const dataListState = get.dataListState() // 父组件注册状态 const regDataListState = () => { // 注入获取列表需要的状态，便于查询、分页里面修改 const state = reg.dataListState() // 需要的配置信息 const listInfo = blogListInfo[jsonFlag] if (typeof listInfo === 'undefined') { // 没有设置对应的信息 return state } // 设置具体的查询条件和查询方式 state.find = listInfo.find state.findKind = listInfo.findKind state.page = listInfo.page // 重新加载数据 watch(() => state.isReload, () => { const _query = {} // 设置查询条件 for (const key in state.find) { const value = state.find[key] const kind = state.findKind[key] if (value && value.length > 0 && value > 0) { _query[key] = [kind, value] } } // 缓存查询条件，分页的时候可以直接使用 state._query = _query state.page.pageIndex = 1// 显示第一页 // 统计总数 help.selectCount(listInfo.tableName, _query).then((count) => { // 设置分页 state.page.pageTotal = count }) // 获取数据 help.select(listInfo.tableName, listInfo.listCol, _query, state.page).then((data) => { _dataList.length = 0 _dataList.push(...data) }) }) // 翻页，依据缓存的查询条件，获取其他页号的数据 watch(() => state.page.pageIndex, () => { // 获取数据 help.select(listInfo.tableName, listInfo.listCol, state._query, state.page).then((data) => { _dataList.length = 0 _dataList.push(...data) }) }) return state } return { regDataListState, // 父组件注册状态 dataList: _dataList, // 父组件获得列表 dataListState // 子组件获得状态 } }
虽然代码多了一点，但是这里处理好各种需求，组件里面就可以轻松使用了。
- 读取配置信息 blogListInfo
因为博文列表、讨论列表需要的信息都是不一样的，所以不同的信息都放在了一个json文件里面，这里用了vite2 的 import 方式读取，然后按照参数（jsonFlag）获取对应的信息。 - VueDS.useStore
获取轻量级状态的注册等函数。 - 子组件里面获取状态
因为 vue 的 inject 必须在 vue 的 setup 的进程里面才可以获取，而在事件的进程里面无法获取，所以只好在这里先把需要的状态获取出来，如果是父组件的话，当然取不出来。 - regDataListState
父组件注册局部状态的函数。从配置信息里面提取对应的信息，设置给 find、findKind、query。 - 监听 state.isReload
isReload 主要针对查询需求，设置好查询条件后对 isReload 取反，就会触发watch，然后这里执行获取数据的操作。在线演示用的是webSQL，正式项目可以使用 axios 向后端申请数据。然后获取数据设置给 dataList。这里需要统计总记录数，而下面的翻页事件里就不需要统计总记录数了。 - 监听 page.pageIndex
这个是应对翻页的需求的。分成两个来监听，目的是区分要不要统计总记录数。
如果数据量不大的话，统计总数没啥问题，每次翻页都统计一下用户也不会有啥感觉。
但是如果数据量大的话，还是每次翻页都去统计一下总数，那么就太浪费性能了。
所以这里做了一下区分，翻页的时候不统计总数，重置查询条件的时候才会统计总数。
父组件的使用方法
我们先来看一个简单情况，讨论列表的使用方式：
<template> <el-card shadow="hover" v-for="(item, index) in dataList" :key="'discusslist_' + index" :id="'discuss_'+ item.ID" > <template #header> <div class="card-header"> {{item.discusser}} <span class="button">({{dateFormat(item.addTime).format('YYYY-MM-DD')}})span> div> template> <div class="text item" v-html="item.concent" :id="'discuss1_'+ item.ID">div> <hr> <i class="el-icon-circle-check">i> {{item.agreeCount}} el-card> <el-empty description="没有讨论呢，抢个沙发呗。" v-if="dataList.length === 0">el-empty> <pager/> <discussForm :id="id"/> template>
把分页和讨论的表单都分布出去做成了单独的组件，这样模板里面可以专注讨论列表的设置了。集中目标不分心。
// 组件 import { ref } from'vue' // 组件 import discussForm from'../components/discuss-form.vue' import pager from'../components/pager.vue' // 数据列表的状态 import dataListControl from'../control/data-list' // 日期格式化 const dateFormat = dayjs // 组件的属性，获取博文ID const props = defineProps({ id: String }) // 获取注册函数和数据容器， const { regDataListState, dataList } = dataListControl('discussList') // 注册状态，设置博文ID为查询条件，获取博文的讨论数据。 const discussState = regDataListState() discussState.find.blogId = props.id discussState.isReload = !discussState.isReload
怎么样？是不是很简洁。
- 父组件里面使用
首先引入 control/data-list，然后获取状态，根据需求设置好查询条件。最后别忘了使用 dataList 绑定模板。 - 分页控件使用
分页做成了单独且可以共享的组件，在组件里面可以直接获取局部状态，给 el-pagination 设置属性，这样就不需要父组件操心了。/src/components/pager.vue
<template> <el-pagination background layout="prev, pager, next" v-model:currentPage="dataListState.page.pageIndex" :page-size="dataListState.page.pageSize" :total="dataListState.page.pageTotal"> el-pagination> template>
获取状态，绑定模板。
// 统一的数据列表的分页组件 import { defineProps } from'vue' // 数据列表的状态 import dataListControl from'../control/data-list' // 获取列表的局部状态 const { dataListState } = dataListControl()
翻页的时候页号会变化，触发 watch 的监听，从而实现翻页获取数据的效果。
子组件的使用方法
也是一样的步骤，只是不需要注册，而是获取父组件注册的状态，得到状态后，在需要的地方修改即可。这样组件里面的代码就非常简单了。比如上面那个分页组件。
我们来看一下讨论表单的组件，模板部分就是一个普通的表单，跳过直接看js部分：
import { reactive, watch } from'vue' // 数据列表的状态 import dataListControl from'../control/data-list' // 表单管理 import discussFromControl from'../control/data-form' // 获取讨论列表的状态 const { dataListState } = dataListControl('discussList') // 表单管理 const { discussModel, addNewDiscuss } = discussFromControl() // 日期格式化 const dateFormat = dayjs // 组件的属性 const props = defineProps({ id: String }) // 发布讨论 const submit = () => { discussModel.blogId = props.id addNewDiscuss().then((id) => { // 通知列表 dataListState.isReload = !dataListState.isReload }) }
先获取讨论列表的状态，然后发布讨论成功后，调用讨论列表的状态，从而触发讨论列表重新加载讨论数据。
其他代码就不一一介绍了，感兴趣的话可以到 gitee 看源码。
轻量级状态 vue-data-state
轻量级状态已经发布到 npm ，可以使用yarn add vue-data-state 来安装。
源码
- 轻量级状态 vue-data-state：https://gitee.com/naturefw/vue-data-state
- 博客：https://gitee.com/naturefw/vue3-blog
在线演示
状态：https://naturefw.gitee.io/vue-data-state/
博客：https://naturefw.gitee.io/vue3-blog
本文作者：自然框架
个人网址：jyk.cnblogs.com
声明：本文为 脚本之家专栏作者 投稿，未经允许请勿转载。
