使用局部状态（轻量级状态）优化博客代码

2021-05-10 11:10 金色海洋（jyk）阅读(584) 评论(0) 编辑收藏举报

上两篇介绍了如何用vite2 + Vue3 搭建一个博客网站，以及轻量级状态的基础使用，那么二者结合起来会发生什么呢？

做个开源博客学习Vite2 + Vue3 （四）实现博客功能 https://www.cnblogs.com/jyk/p/14696474.html

制作一个轻量级的状态管理插件：Vue-data-state https://www.cnblogs.com/jyk/p/14706005.html

回顾博客代码

博客代码里面有三个列表：首页的博文列表、编辑博文里面的博文列表以及讨论列表。
三个列表的写了三份代码，但是对比看一下就会发现，这三份代码大同小异嘛。
其共同点就是：查询条件、分页要求、数据容器。

那么是不是可以针对这几个共同点抽象一下，做成一个共用的函数呢？

这个就需要用到轻量级状态里面的局部状态了。

为啥一定要用状态管理呢？那是因为可以把不同的功能分布到不同的组件里面，而不用拘泥在一个组件内实现全部功能。

比如把查询条件的表单放在单独的组件里面，这样可以简化列表组件的代码，更容易进行管理。

定义用于列表需求的局部状态

// store-ds/index.js
import VuexDataState from 'vue-data-state'

// 设置全局状态和局部状态
export default 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'

/**
 * 数据列表的通用管理类
 * * 查询条件
 * * 分页信息
 * * 加载数据
 * * 注入局部状态
 */
export default function 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>&nbsp;{{item.agreeCount}}&nbsp;&nbsp;
  </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 看源码。