npm install vue3hookvue3hook 是针对 vue3.x 的一款 composition api 的工具库
```
npm install --save vue3hook
`javascript`
import { useRequest } from 'vue3hook'
- useRequest
- useQuickState
- usePageSearch
- useRouteQueryChange
- useSwitch
- useMouse
- useFingerMouse
- useMove
- useFingerMove
- useFullscreen
- useInterval
- useTimeout
- useTitle
- useCountdown
- useWheel
#### Demo:
` #### Config: #### Demo: #### Config: #### Demo: #### Config: #### Demo: #### Config: #### Demo: #### Config: #### Demo: #### Demo(移动端使用): #### Config: #### Demo: #### Config: #### Demo(移动端使用):html`
loading...
{{ getListReq.state.error }}
``html``$3
html`
`javascript`
const {
// 传入的 params,比如:state.name, state.gender
state,
// 原始数据的备份,深拷贝
backupState,
// 拷贝一份当前的 state,深拷贝
clone,
// 重置 state 为原始数据,行为同 lodash.clonedeep
reset,
// 对 state 进行 assign,assign 行为同 lodash.assign
assign: newParams => assign(state, newParams),
// 拷贝一份原始数据,深拷贝
cloneBackup,
} = useQuickState(params = {})`$3
html`
`javascript`
const {
// state.value
state,
// 设置 value 为 true
on,
// 设置 value 为 false
off,
// 切换 on 和 off
toggle,
// 设置 value,用来做多状态切换
setValue,
// 判断 value,用来做多状态切换
isValue,
} = useSwitch((initValue = false))`$3
html``javascript`
useRouteQueryChange({
// 是否在组件初始化时候立即执行一次,时机为 created
immediate: true,
// 要执行的函数
callback: () => {},
})`$3
html`
// 在搜索列表页,我们经常需要把搜索参数挂到 url 上,并能从 url 上同步参数到搜索参数
`javascript`
const {
// 此方法会把请求参数挂到 url 上,并触发传入的 onSearch 方法
search,
// 此方法会把 url 上的参数清空,并触发传入的 onSearch 方法
reset,
} = usePageSearch({
// 这是一个 quickState 类型对象,请用上面的 useQuickState 生成
quickState: useQuickState(),
// 定义在把参数挂到 url 上的时候如何序列化和反序列化
format: {
// 参数名
gender: {
// 序列化
stringify: (value) => value,
// 反序列化
parse: (value) => parseInt(value),
},
},
// 当执行 search 方法时候或者 router 参数变化时候触发的回调
onSearch: () => {},
})`$3
javascript`
// state: { screenX, screenY, clientX, clientY, pageX, pageY }
const { state, start, stop } = useMouse(() => {
console.log('mouse move')
})
start()
stop()`$3
javascript`
const { state, start, stop } = useFingerMouse(() => {
console.log('mouse move')
})
start()
stop()`$3
javascript`
const move = useMove([options])`html`
move(e, divPos)" :style='{ left: divPos.x + "px", top: divPos.y + "px" }'>
move me
`$3
javascript`
const move = useFingerMove([options])`html
@touchstart="(e) => move(e, divPos)"
:style='{ left: divPos.x + "px", top: divPos.y + "px" }'
>
move me
#### Config
`javascript`
const { state, setFull, exitFull, toggleFull } = useFullscreen(target, [options])
#### Demo
`html`
{{ fullscreen.state.value }}
#### Config
`javascript`
const { state, start, stop, restart } = useInterval(callback, (delay = 1000), (immediate = true))
#### Demo
`html`
{{ msgCountdownValue }}
#### Config
`javascript`
const { start, stop } = useTimeout(callback, (delay = 1000), (immediate = true))
#### Demo
`html`
.timeout h2 test timeout el-button-group el-button(@click='timeout.stop') 停止
el-button(@click='timeout.start') 开始
#### Config
`javascript`
const state = useTitle((title = document.title), (restoreOnUnmount = false))
#### Demo
`html`
.title h2 test title div 页面加载时候改标题为 “你好” div 2s 后改标题为 “世界” a(href='#/move')
离开此页面,标题还原为默认标题
#### Config
`javascript`
// state = {
// targetDate
// countdown
// formatted: {
// days
// hours
// minutes
// seconds
// milliseconds
// },
// )
const state = useCountdown(targetDate, (interval = 1000))
`html`
There are {{ countdown.formatted.days }} days {{ countdown.formatted.hours }} hours {{
countdown.formatted.minutes }} minutes {{ countdown.formatted.seconds }} seconds {{
countdown.formatted.milliseconds }} milliseconds until {{ countdown.targetDate }}
`html``
(:style='{ transform: "scale(" + zoomState.value + ")" }')