Lzh on GitHub

Get Stated

--- navigation: title: 开始 title: 入门 description: 快速入门 ---

--- navigation: title: 开始 title: 入门 description: 快速入门 ---

通过视频学习 VueUse

VueUse 是一个基于 Composition API 的实用函数集合。我们假设你已经熟悉 Composition API 的基本概念，然后继续学习。

安装

从 v12.0 开始，VueUse 不再支持 Vue 2。请使用 v11.x 版本以获得 Vue 2 的支持。

npm i @vueuse/core

额外插件 | Nuxt 模块

演示：

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 启用自动导入。

使用 nuxi 将 vueuse 模块安装到你的应用程序中：

npx nuxi@latest module add vueuse

或者使用 npm：

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

Nuxt 3

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

Nuxt 2

nuxt.config.ts
// 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()

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

有关更多详细信息，请参阅 函数列表。