@zhengxs/vue-hooks v0.1.4

@zhengxs/vue-hooks

Vue Hooks Library.

基于 vue3.x 开发的 hooks 插件，@zhengxs/vue-hooks-compat 通过 @vue/composition-api 模块兼容 vue2.x 版本

📦 安装

$ npm install @zhengxs/vue-hooks --save

Hooks 列表

• UI 状态
  • useList 分页列表
  • useForm 表单逻辑
• 网络请求
  • useAxios 基于 axios 封装

使用

封装业务接口

import { reactive } from 'vue'

import { useAxios, useList, List } from '@zhengxs/vue-hooks'

export function useUserList(options: UseUserListOptions = {}) {
  // 通用查询条件
  const query = reactive<UserListQuery>({
    ...options.query,
    nickname: '',
  })

  // 后台服务
  const service = (params: UserListParams, config: AxiosRequestConfig) => {
    return http.get('/api/user/list', { ...config, params })
  }

  // 使用 useAxios 自动管理状态
  const { loading, error, run, cancel } = useAxios<List<User>, UserListParams>(service, {
    silent: true, // 当错误的时候内部消化
    unique: true, // 不管调用几次，都仅保留最后一次的请求状态
  })

  // 使用 useList 管理列表分页调用
  const list = useList<User>({
    loading: loading,
    mode: options.mode, // 列表变更模式，append：追加 | replace: 替换 | manual: 手动处理
    autoLoad: options.autoLoad, // 是否自动加载第一页的数据
    onFetch(args) {
      return run({ ...args, ...query })
    },
  })

  return {
    ...list,
    loading,
    query,
    error,
    cancel
  }
}

在组件中使用

import { FunctionalComponent as FC, defineComponent } from 'vue'

import { Alert, Input, Table } from 'ant-design-vue'

import { useUserList } from '../hooks/useUserList/index'

export const UserList: FC = () => {
  const { loading, error, query, items, page, pageSize, total, search, loadPageData, toJSON } = useUserList({
    autoLoad: true
  })

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '昵称',
      dataIndex: 'nickname',
      key: 'nickname'
    }
  ]

  const pagination = {
    current: page,
    pageSize: pageSize,
    total: total,
    onChange(page: number) {
      return loadPageData(page, { force: true })
    },
    onShowSizeChange(_: number, pageSize: number) {
      return search({ pageSize })
    }
  }

  return () => (
    <>
      <h1>用户列表</h1>
      {error.value && <Alert type="error" message="加载错误" description={error.value.message} closable />}
      <Input
        value={query.nickname}
        placeholder="回车搜索"
        onInput={(evt) => (query.nickname = (evt.target as HTMLInputElement).value.trim())}
        // @ts-ignore
        onPressEnter={() => search()}
      />
      <Table loading={loading.value} columns={columns} dataSource={items.value} rowKey="id" pagination={pagination} />
    </>
  )
}

export default defineComponent({
  name: 'UserList',
  setup: UserList
})

License

• MIT