vue3，你还为状态为何物而发愁吗？（一）

import VuexDataState from'vue-data-state'
exportdefault VuexDataState.createStore({
  global: { // 全局状态
    userOnline: {
      name: 'jyk'//
    }
  },
  local: { // 局部状态
    dataListState () { // 获取列表数据的状态 dataPagerState
      return {
        query: {}, // 查询条件
        pager: { // 分页参数
          pageTotal: 100, // 0：需要统计总数；其他：不需要统计总数
          pageSize: 5, // 一页记录数
          pageIndex: 1, // 第几页的数据，从 1  开始
          orderBy: { id: false } // 排序字段
        },
        choice: { // 列表里面选择的记录
          dataId: '', // 单选，便于修改和删除
          dataIds: [], // 多选，便于批量删除
          row: {}, // 选择的记录数据，仅限于列表里面的。
          rows: [] // 选择的记录数据，仅限于列表里面的。
        },
        hotkey: () => {}, // 处理快捷键的事件，用于操作按钮
        reloadFirstPager: () => {}, // 重新加载第一页，统计总数（添加后）
        reloadCurrentPager: () => {}, // 重新加载当前页，不统计总数（修改后）
        reloadPager: () => {} // 重新加载当前页，统计总数（删除后）
      }
    } 
  },
  init (state) {
  }
})

// 引入状态
import VueDS from'vue-data-state'
// 访问状态
const { reg, get } = VueDS.useStore()
// 父组件注册列表的状态
const state = reg.dataListState()
// 子组件里面获取父组件注册的状态
const dataListState = get.dataListState()

import { watch, reactive } from'vue'
// 状态
import VueDS from'vue-data-state'
// 仿后端API
import service from'../api/dataList-service.js'
/**
 * * 数据列表的通用管理类
 * * 注册列表的状态
 * * 关联获取数据的方式
 * * 设置快捷键
 * @param {string} modeluId 模块ID
 * @returns 列表状态管理类
 */
exportdefaultfunction dataListControl (modeluId) {
  // 显示数据列表的数组
  const dataList = reactive([])
  // 模拟后端API
  const { loadDataList } = service()
  // 访问状态
  const { reg, get } = VueDS.useStore()
  // 子组件里面获取父组件注册的状态
  const dataListState = get.dataListState()
  // 数据加载中
  let isLoading = false
  /**
   * 父组件注册状态
   * @returns 注册列表状态
   */
  const regDataListState = () => {
    // 注册列表的状态，用于分页、查询、添加、修改、删除等
    const state = reg.dataListState()
    //  重新加载第一页，统计总数（添加、查询后）
    state.reloadFirstPager = () => {
      isLoading = true
      state.pager.pageIndex = 1// 显示第一页
      // 获取数据
      loadDataList(modeluId, state.pager, state.query, true).then((data) => {
        state.pager.pageTotal = data.count
        dataList.length = 0
        dataList.push(...data.list)
        isLoading = false
      })
    }
    // 先执行一下，获取初始数据
    state.reloadFirstPager()
    // 重新加载当前页，不统计总数（修改后）
    state.reloadCurrentPager = () => {
      // 获取数据
      loadDataList(modeluId, state.pager, state.query).then((data) => {
        dataList.length = 0
        dataList.push(...data)
      })
    }
    // 重新加载当前页，统计总数（删除后）
    state.reloadPager = () => {
      // 获取数据
      loadDataList(modeluId, state.pager, state.query, true).then((data) => {
        state.pager.pageTotal = data.count
        dataList.length = 0
        dataList.push(...data.list)
      })
    }
    // 监听，用于翻页控件的翻页。翻页，获取指定页号的数据
    watch(() => state.pager.pageIndex, () => {
      // 避免重复加载
      if (isLoading) {
        // 不获取数据
        return
      }
      // 获取数据
      loadDataList(modeluId, state.pager, state.query).then((data) => {
        dataList.length = 0
        dataList.push(...data)
      })
    })
    return state
  }
  return {
    setHotkey, // 设置快捷键，（后面介绍）
    regDataListState, // 父组件注册状态
    dataList, // 父组件获得列表
    dataListState // 子组件获得状态
  }
}