VueUse学习
⚡️ VueUse 学习VueUse学习什么是VueUse为什么用VueUse如何使用⏳Install????简单栗子????useFetchVueUse常用方法总结什么是VueUse如果你了解react的hook,那么VueUse可以看做是vue版的hook库。如果不太了解,简单概括的话,VueUse是基于Composition API的常用函数集合。功能类似于lodash,免去用户自己去重复写
⚡️ VueUse 学习
什么是VueUse
如果你了解react
的hook
,那么VueUse
可以看做是vue
版的hook
库。如果不太了解,简单概括的话,VueUse
是基于Composition API
的常用函数集合。功能类似于lodash
,免去用户自己去重复写一些常见的函数,如:防抖、节流、fetch等。
目前,VueUse
Star数已经达到6.5k,npm
周下载量达57800多次,且多次被尤大提及,完全可以放心食用。需要注意的是,虽然VueUse
目前也支持Vue2
,但Vue3
下食用最佳。
- github:VueUse
- 官网:Get Started
- 分享视频:bilibli_作者分享
为什么用VueUse
首先,VueUse
相对于Vue
全家桶中的其他库而言,使用优先级较低。其中包含的函数基本都能找到其他第三方库或者直接自己封装。但如果是以下两种情况,使用VueUse
非常必要。
- 资深Vue API CV工程师,当使用
Composition API
进行开发时,既想显得高端,又不想自己写工具类,那么VueUse
十分符合需求。 - 想学习
Composition API
分装工具函数库,可以学习VueUse
源码,进行自己函数库的分装,获益良多。
如何使用
⏳Install
npm i @vueuse/core
⚠ From v6.0, VueUse requires vue >= v3.2 or @vue/composition-api >= v1.1
🌰简单栗子
<template>
<div id="app">
<h3>Mouse: {{x}} x {{y}}</h3>
<h3>
Counter: {{count}}
<a @click='inc()' style='margin-right:10px'>+</a>
<a @click='dec()'>-</a>
</h3>
</div>
</template>
<script setup lang="ts">
import { useMouse, useCounter } from '@vueuse/core'
const { x, y } = useMouse()
const { count, inc, dec } = useCounter()
</script>
🌐useFetch
1.简单使用
<template>
<div>
<transition>
<p v-if="isFetching">
loading: {{isFetching}}
</p>
</transition>
<template v-if="!isFetching">
<p>
接口返回:data => {{data}}
</p>
<br />
<p>
接口返回:error => {{error}}
</p>
</template>
</div>
</template>
<script setup lang="ts">
import { useFetch } from '@vueuse/core';
const { isFetching, error, data } = useFetch('https://httpbin.org/get');
</script>
2.拦截器
import { useFetch } from '@vueuse/core';
const { isFetching, error, data } = useFetch('https://httpbin.org/get', {
beforeFetch({ url, options, cancel }) {
options.headers = {
...options.headers,
Authorization: `hello world`,
};
return {
options,
};
},
afterFetch(ctx) {
if (ctx.data.title === 'HxH') ctx.data.title = 'Hunter x Hunter';
return ctx;
},
onFetchError(ctx) {
if (ctx.data === null) ctx.data = { title: 'Hunter x Hunter' };
ctx.error = new Error('Custom Error');
return ctx;
},
});
3.请求方式与相应格式
// get请求参数直接url拼接
const { isFetching, data, error } = useFetch('https://httpbin.org/get?id=1&name=111').get().text();
// post、put、delete在对应方法中传参
const { isFetching, data, error } = useFetch('https://httpbin.org/get')
.post({ id: 1, name: 111 })
.json();
// 也可以通过useFetch配置参数进行配置
const { isFetching, data, error } = useFetch(
'https://httpbin.org/get',
{
method: 'POST',
body: JSON.stringify({
id: 1,
name: 111,
}),
},
{ refetch: true }
).json()
4.自定义useFetch
项目中需要自定义useFetch,用于统一处理请求,包含:baseUrl、token、错误处理、统一返回数据等等
const useMyFetch = createFetch({
baseUrl: 'https://my-api.com',
options: {
async beforeFetch({ options }) {
const myToken = await getMyToken()
options.headers.Authorization = `Bearer ${myToken}`
return { options }
},
},
fetchOptions: {
mode: 'cors',
},
})
const { isFetching, error, data } = useMyFetch('users')
VueUse常用方法总结
VueUse
将所有方法按照功能性进行了分类,包含:Animation、Browser、Component、Formatters、Misc、Sensors、State、Utilities、Watch,详见vueuse.functions。其中较为常用的有:
- useClipboard 复制到剪贴板
- useFetch fetch请求
- useFullscreen 全屏
- useLocalStorage localStorage
- useDebounceFn
- useThrottleFn
更多推荐
所有评论(0)