VueUse个人笔记

下载使用

npm install @vueuse/core
1

个人觉得常用的或者有用的

因为vueUse目前（2022.10.10）网络上并没有中文版，但他真的很好用，只能生啃了

判断黑暗模式

https://vueuse.org/core/useDark/

import { useDark} from '@vueuse/core'

//直接调用库，判断是否为暗黑，而且是响应式的
let isDark = useDark()
// computed，根据isDark变化而变化
const theme = computed(()=>isDark.value?'dark':'light')
//然后接下来如果打开或者关闭暗黑模式，theme的值也会随之变化的
1
2
3
4
5
6
7

本地存储、会话存储

• useStorage 默认本地存储
• useLocalStorage 本地存储
• useSessionStorage session存储
• useStorageAsync 异步存储，一样地使用

这个其实就是localStorage或者sessionStorage本身的调用而已，只不过这个更简单，对象也不用转换序列化直接拿就行

import { useStorage , useLocalStorage , useSessionStorage} from '@vueuse/core'

//返回其本身
const state = useStorage('name','jack')
console.log(state.value) //jack

const obj = useLocalStorage('humen',{name:'tom',age:13})
console.log(obj.value) //{"name": "tom","age": 13}

const flag = useSessionStorage('flag',true)
console.log(flag.value) //true
1
2
3
4
5
6
7
8
9
10
11

useSessionStorage('sid',"asd") 
//等价于
sessionStorage.setItem("sid","asd")

useSessionStorage('sid',null)
//等价于
sessionStorage.getItem("sid")
1
2
3
4
5
6
7

useManualRefHistory 某个值的本地历史记录

https://vueuse.org/core/usemanualrefhistory/#usemanualrefhistory

import {useManualRefHistory } from '@vueuse/core'

const counter = ref(0)
console.log(counter.value) //0

//后面的配置对象可选，其中capacity表示保留最大的历史长度，默认保留全部
const {history,commit,undo,redo,clear,last} = useManualRefHistory(counter,{capacity:15})

counter.value ++
console.log(counter.value) //1
console.log(history.value) //[{"snapshot": 0,"timestamp": 1665393961869}]

//提交历史记录
commit()
console.log(counter.value) //1
console.log(history.value)
// [
// {
//   "snapshot": 1,
//   "timestamp": 1665393961869
// },
//     {
//       "snapshot": 0,
//       "timestamp": 1665393961869
//     }
// ]

//就是不做嘛，取消那次commit，同时将值改回之前的
undo()
console.log(counter.value) // 0
console.log(history.value)
// [
// {
//   "snapshot": 0,
//   "timestamp": 1665393961869
// }
// ]

//redo，再次做一次commit，并且值也再做一个更新
redo()
console.log(counter.value) //1
console.log(history.value)
// [
// {
//   "snapshot": 1,
//   "timestamp": 1665393961869
// },
//     {
//       "snapshot": 0,
//       "timestamp": 1665393961869
//     }
// ]
//保存上一次的记录
console.log(last.value)
// {
//   "snapshot": 1,
//     "timestamp": 1665394221917
// }

//清楚历史记录
clear()
console.log(counter.value) //1
console.log(history.value)
// [
// {
//   "snapshot": 1,
//   "timestamp": 1665393961869
// },
//     {
//       "snapshot": 0,
//       "timestamp": 1665393961869
//     }
// ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

useAsyncState 反应式地异步状态

https://vueuse.org/core/useasyncstate/#useasyncstate
可以查看其中是否为处理完成，或者看失败效果都是可以的

import {useAsyncState } from '@vueuse/core'
import axios from 'axios'

//execute是执行的函数，需要传一个Promise
//state是处理完成的数据，就是请求后得到的结果
// isReady和isLoading是看目前有没有处理完成还是处理中
// error 是该请求如果错误的话，会显示错误信息
const {state,isReady,isLoading ,execute,error} = useAsyncState(
    //第一个函数发请求，其中可传参过去
    (args) =>{
      //  这里就可以拿参数过去
      const id = args?.id || 1
      return axios.get(`https://jsonplaceholder.typicode.com/todos/${id}`).then(t => t.data)
    },
    //这个不太知道，不用管也行
    {},
    //配置
    {
      immediate:false //immediate为false，需要手动执行execute才会做异步处理
    }
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<van-button @click="execute">点击测试事件van-button>
<br>结果：{{state}}
<br>是否处理完成：{{isReady}}
<br>是否处理中：{{isLoading}}
<br>错误信息：{{error}}
<br>
1
2
3
4
5
6
7

一开始，几个值是

结果：{}
是否处理完成：false
是否处理中：false
错误信息：null
1
2
3
4

发请求中，分别是

结果：{}
是否处理完成：false
是否处理中：true
错误信息：null
1
2
3
4

发成功后

结果：{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}
是否处理完成：true
是否处理中：false
错误信息：null
1
2
3
4
5
6
7
8
9

如果错误则是

结果：{}
是否处理完成：false
是否处理中：false
错误信息：xxx（错误信息）
1
2
3
4

可以看到，状态结果都有返回的，如果以后是想做过渡动画或者判断是否还在请求中之类的，可以直接调用这个，判断isLoading就可以

查看浏览器信息（ip，端口之类的）

https://vueuse.org/core/usebrowserlocation/#usebrowserlocation

import {useBrowserLocation} from '@vueuse/core'

  const location = useBrowserLocation()
  console.log(location.value)
1
2
3
4

{
    "trigger": "load",
    "state": {
        "back": null,
        "current": "/",
        "forward": null,
        "position": 1,
        "replaced": true,
        "scroll": {
            "left": 0,
            "top": 6
        }
    },
    "length": 2,
    "hash": "",
    "host": "192.168.1.6:5173",
    "hostname": "192.168.1.6",
    "href": "http://192.168.1.6:5173/",
    "origin": "http://192.168.1.6:5173",
    "pathname": "/",
    "port": "5173",
    "protocol": "http:",
    "search": ""
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

使用游戏手柄！

https://vueuse.org/core/useGamepad/
虽然可能以后都用不上，但是他帅啊，而且现在浏览器居然能做出这种了
（题外话，浏览器唤醒蓝牙也是可以的）

具体咋用还不是很知道，但知道有这么一回事就行了

查看首选语言

https://vueuse.org/core/usePreferredLanguages/

import {usePreferredLanguages} from '@vueuse/core'
const lang = usePreferredLanguages()
console.log(lang) 
1
2
3

[
    "zh-CN",
    "en-GB",
    "en-US",
    "en",
    "zh"
]
1
2
3
4
5
6
7

IOS的安全区域

https://vueuse.org/core/useScreenSafeArea/
这个还不知道怎么用，但是可以抓到IOS低下那安全区域

import { useScreenSafeArea } from '@vueuse/core'

const {
  top,
  right,
  bottom,
  left,
} = useScreenSafeArea()
1
2
3
4
5
6
7
8

改浏览器标题

https://vueuse.org/core/useTitle/

import {useTitle} from '@vueuse/core'

useTitle('我是标题') //浏览器的标题就会变了
1
2
3

获取url参数

https://vueuse.org/core/useUrlSearchParams
要根据路由是history还是hash，传对应的值才会显示正确，hash就是有#的那个

import {useUrlSearchParams} from '@vueuse/core'

//如果浏览器是history类型的话
const param = useUrlSearchParams('history')
console.log(param)
1
2
3
4
5

如果浏览器为http://192.168.22.199:5173/?name=jack&age=12，结果就是

{
    "name": "jack",
    "age": "12"
}
1
2
3
4

手机震动

一般用在手机浏览器中，电脑的PC端咋震动嘛
一定要用在某些事件按钮里面，这样才是最好的

import {useVibrate} from '@vueuse/core'

//一个点击事件
const testClick = () => {
    // 参数配置：震300ms，然后暂停100ms，再震300ms
    const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] })
    console.log(isSupported.value);
    vibrate()
    //在某一处可以停止
    // stop()
}
1
2
3
4
5
6
7
8
9
10
11

键盘事件

https://vueuse.org/core/onKeyStroke/

import {onKeyStroke } from '@vueuse/core'

const counter = ref(0)

onKeyStroke(['w','W','ArrowUp'],(event)=>{
  console.log(event)
  counter.value ++ //如果按下W或者上键，counter的值+1
})

1
2
3
4
5
6
7
8
9

鼠标长按事件

import {onLongPress  } from '@vueuse/core'

//定义一个html的ref元素，这个要挂载到html中的
const htmlRef = ref(null)
const flag = ref(false)

//第一个参数是html中的ref元素
//第二个参数是回调函数，长按后发生什么事情
//第三个是option，默认delay = 500
onLongPress(htmlRef,(evt)=>{
  console.log(evt)
  flag.value = true
},{
  delay:1000
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{{flag}}
    <van-button ref="htmlRef">点击测试事件van-button>

1
2
3

长按1s后，flag = true

使用地理信息

https://vueuse.org/core/usegeolocation/

import { useGeolocation } from '@vueuse/core'

const { coords, locatedAt, error } = useGeolocation()
1
2
3

其中coords包含所有的地理信息

watch等的一堆方法

有很多好用的，比如

• watch到一定次数就暂停的 https://vueuse.org/shared/until/ 或者 https://vueuse.org/shared/watchAtMost/
• 对数组更好的watch操作的 https://vueuse.org/shared/watchArray/
• 只触发一次的watch https://vueuse.org/shared/watchOnce/
• watch看次数进行防抖节流的 https://vueuse.org/shared/watchDebounced/ 和https://vueuse.org/shared/watchThrottled/
• 可以对watch进行暂停监听的 https://vueuse.org/shared/watchPausable/

computer计算属性异步处理

https://vueuse.org/core/computedAsync/

import { computedAsync } from '@vueuse/core'

const userInfo = computedAsync(
    //写异步回调函数，return什么
    async () => {
        return await mockLookUp(name.value)
    },
    null, // initial state
)
1
2
3
4
5
6
7
8
9

reactive对象类型，删除其中的字段

import { reactiveOmit } from '@vueuse/core'

const obj = reactive({
    x: 0,
    y: 0,
    elementX: 0,
    elementY: 0,
})

const picked = reactiveOmit(obj, 'x', 'elementX') // { y: number, elementY: number }

1
2
3
4
5
6
7
8
9
10
11

reactive对象类型，抽取其中的字段

import { reactivePick } from '@vueuse/core'

const obj = reactive({
  x: 0,
  y: 0,
  elementX: 0,
  elementY: 0,
})

const picked = reactivePick(obj, 'x', 'elementX') // { x: number, elementX: number }

1
2
3
4
5
6
7
8
9
10
11

直接使用base64

import { useBase64 } from '@vueuse/core'

//这个就是要转换成base64的
const text = ref('')

//转换成base64
const { base64 } = useBase64(text)
1
2
3
4
5
6
7

深拷贝

https://vueuse.org/core/useCloned/
官方说的是,将ref克隆到reactive中,但是ref和reactive的深拷贝好像也是可以的?

import {useCloned  } from '@vueuse/core'

const source = ref(123)
const { cloned } = useCloned(source)

source.value = 456

console.log(source.value) //456
console.log(cloned.value) //123

const obj = reactive({name:'tom',age:12})
const {cloned:clonedObj} = useCloned(obj)

obj.name = 'jack'
obj.age = 13
console.log(obj) //{"name": "jack", "age": 13}
console.log(clonedObj.value) //{"name": "tom", "age": 12}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

循环队列

https://vueuse.org/core/useCycleList/
也是挺方便的

import { useCycleList } from '@vueuse/core'

//参数是一个队列,然后state就是当前值,可以用next或者prev手动调用前一个或者后一个
const { state, next, prev } = useCycleList([
  'Dog',
  'Cat',
  'Lizard',
  'Shark',
  'Whale',
  'Dolphin',
  'Octopus',
  'Seal',
])

console.log(state.value) // 'Dog'

prev()

console.log(state.value) // 'Seal'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

boolean 切换

其实就是一个布尔值的真假值切换而已

import {  useToggle } from '@vueuse/core'

const isDark = true
const toggleDark = useToggle(isDark) //isDark就是false了
1
2
3
4

数字和字符串的响应式转换

useToNumber 和useToString

const number = ref(3.14)
const str = useToString(number)
1
2

更改大小写，书写方式的方法

例子在这里

画板

（以下的都要下载外部库，都要先npm i @vueuse/integrations ）
文档

二维码生成

要先安装外部库

npm i @vueuse/integrations
npm i qrcode
1
2

import { useQRCode } from '@vueuse/integrations/useQRCode'

//这个其实就是二维码图片，和公司对接的还要看一下
const qrcode = useQRCode('https://www.bilibili.com/')
1
2
3
4

    <img :src="qrcode" alt="">

1
2