mxphenix-hooks_taro_vue v1.0.0

目录

• useToggle
• useVisible
• useLoading
• useClassName
• useAsync
• useRequest
• useLoadPage
• useLoadRefresh

useToggle

用于两个开关状态之间切换的 Hook

代码演示

<template>
  <view>状态值：{{ state ? '开' : '关' }}</view>
  <button @click='off'>关</button>
  <button @click='on'>开</button>
  <button @click='reverse'>切换</button>
</template>

<script setup lang="ts">
import { useToggle } from '@hooks/index';
const { state, on, off, reverse } = useToggle(false);
</script>

API

const { state, on, off, reverse } = useToggle(defaultValue?: boolean);

Params

Result

useVisible

用于显隐两种状态之间切换的Hook

代码演示

<template>
  <view v-if="visible">This is a good hook.</view>
</template>

<script setup lang="ts">
import { useVisible } from '@hooks/index';
const { visible, show, hide, reverse } = useVisible(false);
</script>

API

const { visible, show, hide, reverse } = useVisible(defaultValue?: boolean);

Params

Result

useLoading

用于加载状态之间切换的Hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <button @click='hideLoading'>取消</button>
  <button @click='showLoading'>加载</button>
</template>

<script setup lang="ts">
import { useLoading } from '@hooks/index';
const { loading, showLoading, hideLoading } = useLoading(false);
</script>

API

const { loading, showLoading, hideLoading } = useLoading(defaultValue?: boolean);

Params

Result

useClassName

用于管理组件私有化样式类名

<template>
  <SafeArea position="both">
    <view :class="className('__background')">
      <view :class="className('__background__header')">
        <text :class="className('__background__header__title')"
          >欢迎登录柏溪福利小程序</text
        >
        <text :class="className('__background__header__desc')"
          >完善信息，我们将会为您提供专属服务</text
        >
        <text :class="className(['__background__header__tips', '__background__header__tips--active'])"
          >完善信息，我们将会为您提供专属服务</text
        >
      </view>
    </view>
  </SafeArea>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useClassName } from '@hooks/index';
import { SafeArea } from '@components/index';

const { className } = useClassName('_login');
</script>

<style lang="scss">
@import './index.scss';
</style>

API

const { className } = useClassName(prefixCls: string);

Params

Result

useAsync

用于处理异步任务的Hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <view v-if="data">
    <view v-for="item in data">{{ item.title }}</view>
  </view>
  <view v-if="error">{{ error }}</view>
</template>

<script setup lang="ts">
import { useAsync } from '@hooks/index';

const delay = (timer = 1000) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Math.random());
    }, timer);
  });
};

const { data, loading, error, run } = useAsync(
  async () => {
    await delay(100);
    await delay(200);
  },
  {
    immediate: true,
    cache: false,
    onBefore(params) {
      console.log('params', params);
    },
    onSuccess(result) {
      console.log('result', result);
      console.log('params', params);
    },
    onError(error) {
      console.log('error', error);
    },
    onFinally(params, result, error) {
      console.log('result', result);
      console.log('params', params);
      console.log('error', error);
    },
  }
);
</script>

API

const { data, loading, error, run } = useAsync<T = any>(service: AsyncService<T>, option: AsyncOption<T>);

Params

type Params = Record<string, any>;

AsyncService

type AsyncService<T = any> = (params?: Params) => Promise<T>;

AsyncOption

type AsyncOption<T = any> = {
  immediate?: boolean;
  cache?: boolean;
  onBefore?: (params?: Params) => void;
  onSuccess?: (result: T, params?: Params) => void;
  onError?: (error: any) => void;
  onFinally?: (
    params: Params | undefined,
    result: T | undefined,
    error: any
  ) => void;
};

Result

Params

Options

useRequest

用于处理服务请求的Hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <view v-if="data">
    <view v-for="item in data">{{ item.title }}</view>
  </view>
  <view v-if="error">{{ error }}</view>
</template>

<script setup lang="ts">
import { useRequest } from '@hooks/index';
import { GetUsers } from '@services/index';
const { data, loading, error } = useRequest<API.UserItem[]>(GetUsers, {
  immediate: true;
  cache: false,
  defaultParams: {
  	current: 1,
    size: 24
  }
});
</script>

API

const { data, params, loading, error, run, refresh } = useRequest<T = any>(service: AsyncService<T>, options: RequestOption<T>);

RequestOption

type RequestOption<T = any> = AsyncOption<T> & {
  defaultParams?: Params;
};

Result

Params

Options

useLoadPage

用于处理分页请求的Hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <view v-if="data">
    <view v-for="item in data">{{ item.title }}</view>
  </view>
  <view v-if="error">{{ error }}</view>
  <button @click="prev">上一页</button>
  <button @click="next">下一页</button>
  <button @click="prev({ run: true })">上一页(请求)</button>
  <button @click="next({ run: true })">下一页(请求)</button>
</template>

<script setup lang="ts">
import { useLoadPage } from '@hooks/index';
import { GetUsers } from '@services/index';
const { data, loading, error, params, prev, next, paging } = useLoadPage<API.UserItem[]>(GetUsers, {
  immediate: true;
  defaultParams: {
  	current: 1,
    size: 24
  },
  defaultPaging: {
    pageNum: 1,
    size: 16,
  },
  pagingOption: {
    currentField: 'pageNum',
    sizeField: 'size',
  }
});
</script>

API

const { data, params, paging, loading, error, run, next, prev, refresh } = useLoadPage<T = any>(service: AsyncService<T>, options: LoadPageOption<T>);

LoadPageOption

type LoadPageOption<T = any> = RequestOption<T> & {
  defaultPaging?: Params;
  pagingOptions?: {
    currentField?: string;
    sizeField?: string;
  }
};

PageOption

type PageOption= { run?: boolean };

Result

Params

Options

Paging

pagingOptions

useLoadRefresh

用于处理请求刷新的hook

代码演示

<template>
  <view v-if="loading">loading...</view>
  <view v-if="data">{{ data }}</view>
  <buttonn @click="run">刷新</buttonn>
  <buttonn @click="run({ pullDownRefresh: true })">触发下拉刷新</buttonn>
</template>

<script setup lang="ts">
import { useRequest, useLoadRefresh } from '@hooks/index';
import { GetUsers, GetProfile } from '@services/index';

const {
  data: users,
  loading: userLoading,
  run: userAsync
} = useRequest<API.UserItem[]>(GetUsers, {
  immediate: false
});

const {
  data: profile,
  loading: profileLoading,
  run: profileAsync
} = useRequest<API.UserProfile>(GetProfile, {
  immediate: false
});

const { data, loading, run } = useLoadRefresh(
  async () => {
    await userAsync();
    await profileAsync();
  },
  { immediate: true }
});
</script>

API

const { data, loading, error, run } = useLoadRefresh<T = any>(service: AsyncService<T>, option: AsyncOption<T>);

Result

RunOption