# 石头HOOK-4Vue

**Repository Path**: steveouyang/sto-hook-vue

## Basic Information

- **Project Name**: 石头HOOK-4Vue
- **Description**: 石头HOOK：超好用的Vue3+TS自定义hook库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-08-03
- **Last Updated**: 2023-08-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

- NPM官方源安装【石头指令】
```shell
npm i -g nrm
nrm use npm
npm i @steveouyang/sto-hooks-vue
```

- 轻松设置倒计时
```js
<template>
  <div>
    UseCountdownDemo
    <hr />
    remainingSeconds:{{ remainingSeconds }} <br />

    <button @click="startCountdown">startCountdown</button>
    <button @click="stopCountdown">stopCountdown</button>
  </div>
</template>

<script setup lang="ts">
import { useCountdown } from "@steveouyang/sto-hooks-vue";

const { remainingSeconds, startCountdown, stopCountdown } = useCountdown(60);
</script>

<style lang="scss" scoped></style>
```

- 校验表单
```js
<template>
  <div>
    <h1>表单验证</h1>
    <div>
      <label for="username">用户名：</label>
      <input id="username" v-model="username" type="text" />
      <p v-if="!isUsernameValid">用户名长度必须大于等于 6</p>
    </div>
    <div>
      <label for="password">密码：</label>
      <input id="password" v-model="password" type="password" />
      <p v-if="!isPasswordValid">密码长度必须大于等于 8</p>
    </div>
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script lang="ts">
// import useFormValidator from "@/hooks/useFormValidator";
import { useFormValidator } from '@steveouyang/sto-hooks-vue'

export default {
  name: "FormValidator",
  setup() {
    const {
      username,
      password,
      isUsernameValid,
      isPasswordValid,
      handleSubmit,
    } = useFormValidator();

    return {
      username,
      password,
      isUsernameValid,
      isPasswordValid,
      handleSubmit,
    };
  },
};
</script>
```

- 发起网络请求
```js
<template>
  <div>
    <button @click="fetchData">fetchData</button>
    <p>loading {{ loading }}</p>
    <p>error {{ error }}</p>
    <p>data {{ data }}</p>
  </div>
</template>

<script setup lang="ts">
// import useRequest from "@/hooks/useRequest";
import { useRequest } from "@steveouyang/sto-hooks-vue";

const { data, loading, error, fetchData } = useRequest(
  "https://lekuzhima.club/interview/album/0"
);
</script>

<style lang="scss" scoped></style>
```

- 发起视频会话
```js
<template>
  <div>
    <h1>视频通话示例</h1>
    <div>
      <h2>本地视频</h2>
      <video ref="localVideoRef" autoplay></video>
    </div>
    <div>
      <h2>远程视频</h2>
      <video ref="remoteVideoRef" autoplay></video>
    </div>
  </div>
</template>

<script setup>
import useWebRTC from "../useWebRTC";
const { localVideoRef, remoteVideoRef } = useWebRTC();
</script>

<style lang="scss" scoped></style>

```