VueUse常见方法使用

VueUse 是一个针对 Vue 开发者的实用函数集合，它提供了组合式 API 的实用功能。以下是一些 VueUse 中常用方法的简单示例：

1. useRefs - 跟踪响应式引用（类似于 ref 但可以直接展开）

import { useRefs } from '@vueuse/core'
 
export default {
  setup() {
    const { count } = useRefs({ count: 0 })
 
    return { count }
  }
}

2. useCounter - 增加和减少一个响应式计数器

import { useCounter } from '@vueuse/core'
 
export default {
  setup() {
    const { count, increment, decrement } = useCounter()
 
    return { count, increment, decrement }
  }
}

3. useMouse - 追踪鼠标位置

import { useMouse } from '@vueuse/core'
 
export default {
  setup() {
    const { x, y } = useMouse()
 
    return { x, y }
  }
}

4. useFetch - 执行 HTTP 请求并响应数据

import { useFetch } from '@vueuse/core'
 
export default {
  setup() {
    const { data, isFetching } = useFetch('https://api.example.com/data')
 
    return { data, isFetching }
  }
}

5. useStorage - 管理 local/session 存储

import { useStorage } from '@vueuse/core'
 
export default {
  setup() {
    const { storage, removeStorage } = useStorage('my-key', localStorage)
 
    return { storage, removeStorage }
  }
}

这些例子展示了如何在 Vue 应用中导入和使用 VueUse 提供的函数。每个函数都有其特定的用途，并且可以直接在 Vue 组件中使用。