Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 3（VueUse ）

VueUse函数库

  VueUse 是一个库，收集了在使用 Vue2/Vue3 Composition API 时可以使用的有用函数。使用 Composition API，您可以通过将反应变量和逻辑与组件分开来创建可重用的函数，因此您可以创建像 VueUse 这样的库。

  在 Vue 的 Composition API 中，可重用的函数（例如 VueUse 中包含的函数）称为可组合函数。仅 Composables 这个名称并不能让您了解它是什么，因此本文档解释了如何使用 VueUse 以及如何创建 Composables 功能。它还解释了如何创建可组合组件，而不仅仅是函数。

  如果你看一下VueUse的功能，有一些你可以自己创建，但是注册的功能有100多个，所以如果你没有使用它的经验，请浏览一遍，看看有没有你的功能可以用。推荐给。

  它主要解释 Vue Composables 的基础知识而不是如何使用 VueUse。访问VueUse网站https://vueuse.org/查看VueUse有哪些功能。您可以通过单击屏幕中央的功能来移动到功能列表页面。

第一章 Vue3项目创建 1 Vue CLI 创建vue项目
第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目
第一章 Vue3项目创建 3 Vite 创建 vue项目
第二章 Vue3 基础语法指令
第三章 Vue Router路由器的使用
第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
第四章 VUE常用 UI 库 2 ( ailwind 后台框架)
第五章 Vue 组件应用 1( Props )
第五章 Vue 组件应用 2 ( Emit )
第五章 Vue 组件应用 3( Slots )
第五章 Vue 组件应用 4 ( provide 和 inject )
第五章 Vue 组件应用 5 (Vue 插件)
第六章 Pinia,Vuex与axios,VueUse 1（Pinia）
第六章 Pinia,Vuex与axios,VueUse 2(Vuex)
第六章 Pinia,Vuex与axios,VueUse 3（VueUse）
第六章 Pinia,Vuex与axios,VueUse 4（axios）

  现在我们已经确认已经使用 Vite 创建了项目并且开发服务器已经启动，我们将安装 VueUse 库。

npm i @vueuse/core

1 使用 VueUse

  文档中描述了如何使用它，如何使用选项，以及类型的定义，所以我们将参考它并进行设置。

  让我们通过将 useCounter 函数从 vueuse 核心导入到 App.vue 文件来检查操作。通过使用 useCounter 函数，您可以拥有一个计数器功能。我认为大多数人都创建了它，因为它是一个经常用于学习的功能。单击按钮时递增或递减的计数器。您可以在 useCounter 的自变量中指定计数的初始值，并从返回值中使用计数变量、inc 函数和 dec 函数。使用VueUse，可以通过执行导入函数返回的变量和函数，在导入组件中使用导入函数的功能。其他的get、reset等函数也是useCounter返回的，不过这次没有用到。

<script setup>
import { useCounter } from '@vueuse/core';
const { count, inc, dec } = useCounter(0);
script>

<template>
  <h1>VueUse: useCounterh1>
  <div>Count:{{ count }}div>
  <div>
    <button @click="() => inc()">increasebutton>
    <button @click="() => dec()">decreasebutton>
  div>
template>

1 可组合函数

  我们将通过自己创建此计数器函数来检查如何创建可组合函数。

  编写以下代码，在不使用 VueUse 的情况下，将计数器功能添加到 App.vue 文件中。用ref函数定义count，设置函数使inc函数使count加1，dec函数使count减1。如果检查操作，它的工作方式与 VueUse 中使用的 useCounter 相同。

<script setup>
import { ref } from 'vue';

const count = ref(0);
const inc = () => count.value = count.value + 1;
const dec = () => count.value = count.value - 1;
script>

<template>
  <h1>VueUse: useCounterh1>
  <div>Count:{{ count }}div>
  <div>
    <button @click="() => inc()">increasebutton>
    <button @click="() => dec()">decreasebutton>
  div>
template>

  使用上述代码创建可组合函数。在 src 文件夹下创建一个 composables 文件夹，并创建一个 useCounter.js 文件。

  在 useCounter.js 文件中，设置 count 变量和 inc 和 dec 函数并将它们导出，以便可以从 Vue 组件中导入它们。当使用此设置在导入的组件中执行 useCounter 函数时，将返回 Count、inc、dec。这样就完成了可组合函数的创建。

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  const inc = () => (count.value = count.value + 1);
  const dec = () => (count.value = count.value - 1);
  return {
    count,
    inc,
    dec,
  };
}

让我们导入创建的 useCounter.js 文件并检查操作。注意设置方法和函数名与使用VueUse时相同，只是导入位置不同。这次与 VueUse 不同的是，它是前面创建的 composables 文件夹中的 useCounter.js 文件

<script setup>
import { useCounter } from './compos/useCounter';
const { count, inc, dec } = useCounter();
script>

<template>
  <h1>VueUse: useCounterh1>
  <div>Count:{{ count }}div>
  <div>
    <button @click="() => inc()">增加button>
    <button @click="() => dec()">减少button>
  div>
template>

使用 useCounter 计数

  虽然它是一个简单的函数，但我能够理解如何创建我自己的可组合函数。

我们查看一下VueUse的useCounter的源码，看看在创建方法上有没有区别。源代码是用 TypeScript 写的，所以可能看起来不一样，但是如果你仔细阅读，你会发现内容和你之前创建的是一样的。

import { ref } from 'vue-demi'

export interface UseCounterOptions {
  min?: number
  max?: number
}

/**
 * Basic counter with utility functions.
 *
 * @see https://vueuse.org/useCounter
 * @param [initialValue=0]
 * @param {Object} options
 */
export function useCounter(initialValue = 0, options: UseCounterOptions = {}) {
  const count = ref(initialValue)

  const {
    max = Infinity,
    min = -Infinity,
  } = options

  const inc = (delta = 1) => count.value = Math.min(max, count.value + delta)
  const dec = (delta = 1) => count.value = Math.max(min, count.value - delta)
  const get = () => count.value
  const set = (val: number) => (count.value = val)
  const reset = (val = initialValue) => {
    initialValue = val
    return set(val)
  }

  return { count, inc, dec, get, set, reset }
}

一个有趣的区别是 ref 函数是使用 vue-demi 而不是 vue 导入的，因此它可以与 Vue2/Vue3 一起使用。

3 可组合组件

  VueUse 中的一些可用函数提供了无渲染组件版本，而不仅仅是函数。以此为参考，让我们将 useCounter 函数变成一个组件。无渲染是没有模板标签的组件。
  使用可组合函数时，我们将反应性数据和函数从可组合函数传递给导入的组件。组件还需要将反应性数据和功能从可组合组件传递到父组件。可组合组件使用作用域槽将数据从子组件传递到父组件。
  在src的components文件夹下新建一个UseCounter.vue文件，写入如下代码。由于 setup 函数包含 props 和 context 作为参数，因此使用了包含在 context 中的插槽。您要传递给插槽默认参数的数据和函数已设置。变量的定义和函数的设置与前面的函数相同。

<script setup>
    import { ref } from 'vue';
    const count = ref(0);
    const inc = () => (count.value = count.value + 1);
    const dec = () => (count.value = count.value - 1);

script>
<template>
<slot :inc="inc" :dec="dec" :count="count">slot>
template>

  在 App.vue 文件端，您可以使用 Scoped Slot 通过 v-slot:default 从 UseConter 组件接收数据。由于 slotProps 包含 count、inc 和 dec，我们将使用它们。

<script setup>
import UseCounter from './components/UseCounter.vue';
script>

<template>
  <h1>VueUse: useCounth1>
  <use-counter v-slot:default="{ count, inc, dec }">
    <div>Count:{{ count }}div>
    <div>
      <button @click="() => inc()">increasebutton>
      <button @click="() => dec()">decreasebutton>
    div>
  use-counter>
template>

我们能够使用称为计数器函数的简单代码创建可组合的函数和组件。特别是对于组件，有些人一开始可能会感到困惑，因为它们使用的是 scoped slots，但是一旦你理解了如何传递和接收值，我认为创建它们的难度与函数并没有那么大的不同。

Composition API 的特点是能够通过使用可组合函数轻松使用可重用函数。如果您需要 VueUse 中不存在的功能，请创建您自己的 Composables 功能并使用它进行高效开发