入门指南

通过视频学习 VueUse

VueUse 是基于组合 API 的一系列实用函数集合。在继续之前，我们假设你已经对组合 API 的基本概念有所了解。

安装

🎩 从 v4.0 开始，它通过 vue-demi 的支持 Vue 2 和 Vue 3 在一个单独的包中！

npm i @vueuse/core

附加组件 | Nuxt 模块

从 v6.0 开始，VueUse 需要 vue >= v3.2 或 @vue/composition-api >= v1.1

示例

• Vite + Vue 3
• Nuxt 3 + Vue 3
• Webpack + Vue 3
• Nuxt 2 + Vue 2
• Vue CLI + Vue 2

CDN

<script src="https://unpkg.com/@vueuse/shared"></script>

<script src="https://unpkg.com/@vueuse/core"></script>

它将以 window.VueUse 的形式暴露在全局中。

Nuxt

从 v7.2.0 开始，我们提供了一个 Nuxt 模块，用于在 Nuxt 3 和 Nuxt Bridge 中启用自动导入。

npm i -D @vueuse/nuxt @vueuse/core

Nuxt 3

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
  ],
})

Nuxt 2

// nuxt.config.js
export default {
  buildModules: [
    '@vueuse/nuxt',
  ],
}

然后在你的 Nuxt 应用程序中的任何地方使用 VueUse 函数。例如：

<script setup lang="ts">
const { x, y } = useMouse()
</script>

<template>
  <div>pos: {{ x }}, {{ y }}</div>
</template>

用法示例

只需从 @vueuse/core 导入你需要的函数

<script setup>
import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

// 跟踪鼠标位置
const { x, y } = useMouse()

// 用户是否喜欢暗黑主题
const isDark = usePreferredDark()

// 在本地存储中持久化状态
const store = useLocalStorage(
  'my-storage',
  {
    name: 'Apple',
    color: 'red',
  },
)
</script>

更多详情请参考函数列表。