「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

概念

首先放出vueuse的官网：vueuse.org/

VueUse 是一组基于Composition API的实用函数。

你可以在vue2/3，和nuxt中使用它，省去很多繁琐的代码书写。

如果你还没有使用Composition API的习惯，你可以尝试学习Composition API的基本概念。

install

推荐大家使用pnpm,至于为什么？可以看他的详细文档。pnpm.io/installatio…

pnpm i @vueuse/core

useage

只需从中导入您需要的功能 @vueuse/core

import { useMouse, usePreferredDark, useLocalStorage } 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 }
  }
}

import { useMouse, usePreferredDark, useLocalStorage } 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 }
  }
}

自动导入

另外我们可以使用vite自动导入的插件

import AutoImport from 'unplugin-auto-import/vite'

于是在vite配置中，我们可以

export default defineConfig({
  plugins: [
    ...,
    AutoImport({
      imports: ['@vueuse/core'],
      dts: 'src/auto-imports.d.ts',
      ...
    })
  ],
  // 预构建vueuse的包
  optimizeDeps: {
    include: [..., '@vueuse/core']
  }
})

这样我们就在项目中，直接使用vueuse的api，节约导入的步骤。

注意

VueUse 中的大多数函数都会返回一个refs 对象，我们可以使用ES6 的对象解构语法来获取您需要的内容。

import { useMouse } from '@vueuse/core'

// "x" and "y" are refs
const { x, y } = useMouse()

console.log(x.value)

const mouse = useMouse()

console.log(mouse.x.value)

如果您更喜欢将它们用作对象属性样式，则可以使用reactive().

import { reactive } from 'vue' 
import { useMouse } from '@vueuse/core'

const mouse = reactive(useMouse())

// "x" and "y" will be auto unwrapped, no `.value` needed
console.log(mouse.x)

nuxt

从 v7.2.0 开始，我们发布了一个 Nuxt 模块来启用 Nuxt 3 和 Nuxt Bridge 的自动导入。

npm i -D @vueuse/nuxt

npm i -D @vueuse/nuxt

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

// 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>

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

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