VueUse一款实用工具集

组合式 API 是以 Vue 中数据可变的、细粒度的响应性系统为基础的，而函数式编程更强调数据不可变。

为什么要有组合式 API？

组合式 API 最基本的优势是它使我们能够通过组合函数来实现更加简洁高效的逻辑复用。它解决了所有 mixins 的缺陷，那是选项式 API 中一种逻辑复用机制。

组合式 API 提供的更多逻辑复用可能性孵化了一些非常棒的社区项目，比如 VueUse，一个不断成长的工具型组合式函数集合。

下面我们演示两个常见的组合式函数封装。

鼠标跟踪器示例，使用组合式 API 实现鼠标跟踪功能。

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'


// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)
  const y = ref(0)


  // 组合式函数可以随时更改其状态。
  function update(event) {
    x.value = event.pageX
    y.value = event.pageY
  }


  // 一个组合式函数也可以挂靠在所属组件的生命周期上
  // 来启动和卸载副作用
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))


  // 通过返回值暴露所管理的状态
  return { x, y }
}

下面是它在组件中使用的方式：

<script setup>
import { useMouse } from './mouse.js'


const { x, y } = useMouse()
</script>


<template>Mouse position is at: {{ x }}, {{ y }}</template>

我们也可以将添加和清除 DOM 事件监听器的逻辑放入一个组合式函数中：

// event.js
import { onMounted, onUnmounted } from 'vue'


export function useEventListener(target, event, callback) {
  // 如果你想的话，
  // 也可以用字符串形式的 CSS 选择器来寻找目标 DOM 元素
  onMounted(() => target.addEventListener(event, callback))
  onUnmounted(() => target.removeEventListener(event, callback))
}

代码很简单，其实我们写这些组合式函数封装的逻辑，在 VueUse 库也已经提供了，所以这些代码都不要自己写了，直接拿过来用就可以。

VueUse 是一款基于 Vue 组合式 Api 的实用工具集，目前有140多个实用函数可以使用。

官网地址：https://vueuse.org/

安装

npm i @vueuse/core

用法

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 }
  },
}

代码中 useMouse 就是之前提到的代码，表示鼠标跟踪器的逻辑，useLocalStorage 表示使用本地存储提供持久缓存能力，usePreferredDark 表示暗黑主题模式。当然，常用的接口请求功能也有。

import { useFetch } from '@vueuse/core'


const { isFetching, error, data } = useFetch(url)

好了，常用的函数方法就介绍到这。