vue3中使用vueuse（必看）

目录

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>复制

 剩余方法自行开发理解哈~