阿超 > vueuse

vueuse

2023-04-15

前端

多数人在心底蔑视德，但很少有人轻视荣誉。——沃夫拿格

分享一个vue的组合式api封装库vueuse

github：https://github.com/vueuse/vueuse

image-20230415230706292

官档：https://vueuse.org/

image-20230415230901946

大致用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

export default {
  setup() {
    // tracks mouse position
    const { x, y } = useMouse()

    // is user prefers dark theme
    const isDark = usePreferredDark()

    // persist state in localStorage
    const store = useLocalStorage(
      'my-storage',
      {
        name: 'Apple',
        color: 'red',
      },
    )

    return { x, y, isDark, store }
  },
}

一些Demo