目录
vueuse能做什么？
一、如何使用
1、先安装
2、引入
二、常用方法
1、useRoute 和 useRouter
2、useClipboard 复制文本
3、useMouse 追踪鼠标坐标
4、useFullScreen 用于浏览器的全屏展示作用
5、useStorage 用于数据存储
6、useDateFormat 格式化日期
7、useNow 跟踪当前的日期时间
8、useBase64 处理 base64 编码的数据
定义
首先vueuse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API（组合式API）的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式，省去程序员自己写相关代码。
vueuse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。
vueuse能做什么？
它可以为以下类别提供工具函数！
- 动画
- 浏览器
- 组件
- 格式化
- 传感器
- State（状态机）
- 公共方法
- 监听
- 等等
一、如何使用
1、先安装
npm install @vueuse/core
或 yarn add vueuse
2、引入
在你的 Vue 组件中引入并使用 VueUse 提供的函数或 hooks。
例如，如果你想使用 useLocalStorage 这个 hook，你可以这样：
import { useLocalStorage } from '@vueuse/core';
// 使用 useLocalStorage 钩子函数
const [state, setState] = useLocalStorage('myStorage', { name: 'lily', age: 11 });
二、常用方法
1、useRoute 和 useRouter
import { useRoute, useRouter } from 'vueuse'
const route = useRoute()
const router = useRouter()
//route.query 访问路由参数
//router.push() 操作路由 等2、useClipboard 复制文本
useClipboard 用于实现复制文本到剪贴板的功能，很方便，不需要再额外安装插件
import { useClipboard } from 'vueuse'
const { copy, isCopy } = useClipboard()
// 复制函数
const getCopyContent = async (content: string) => {
try {
await copy(content);
alert("复制成功");
} catch (error) {
alert("复制失败");
}
};
//isCopy 作为一个响应式的属性，能够实时反映剪贴板中内容的状态，即内容是否被复制。3、useMouse 追踪鼠标坐标
import { useMouse } from 'vueuse'
const { x, y} = useMouse()
console.log('x坐标为：',x.value)
console.log('y坐标为：',y.value)4、useFullScreen 用于浏览器的全屏展示作用
//isFullscreen 当前是否是全屏,true/false,可用于一些逻辑的判断
//toggle 是函数，直接调用
const { isFullscreen, toggle } = useFullscreen();
<button @click="toggle">点击切换</button>5、useStorage 用于数据存储
useStorage默认存入localStorage，存入sessionstorage需要设定参数
import { useStorage} from '@vueuse/core';
// 存入值，默认localStorage
const state = useStorage("myStorage", {
name: "lily",
age: 11,
});
// 存入sessionStorage
const state = useStorage("myStorage", {
name: "lily",
age: 11,
}, sessionStorage);
// 需要parse一下，因为返回的是序列化的数据
state = JSON.parse(state.value)
// 获取值
console.log(state)6、useDateFormat 格式化日期
import { useDateFormat } from '@vueuse/core';
// 创建一个响应式的日期对象
const date = ref(new Date());
// 使用 useDateFormat 钩子函数格式化日期
const { formattedDate } = useDateFormat({
date,
format: 'yyyy-MM-dd HH:mm:ss', // 指定日期格式
});
<template>
<div>
<p>格式化日期: {{ formattedDate }}</p>
</div>
</template>7、useNow 跟踪当前的日期时间
这个函数返回一个响应式的 ref 对象，该对象会持续更新为当前的日期和时间。
<template>
<div>
<p>当前时间: {{ now }}</p>
</div>
</template>
<script setup>
import { useNow } from '@vueuse/core';
const now = useNow();
</script>8、useBase64 处理 base64 编码的数据
它的功能是将输入的文件转换为 base64 编码，并允许你监听文件的变化。
<template>
<input type="file" @change="handleFileChange">
<div>Base64: {{ base64 }}</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useBase64 } from '@vueuse/core';
const file = ref<File>();
const base64 = ref('');
const handleFileChange = (event: Event) => {
const input = event.target as HTMLInputElement;
if (input.files && input.files.length > 0) {
file.value = input.files[0];
}
};
base64.value = useBase64(file).value;
</script>剩余方法自行开发理解哈~
