【Nuxt】项目相关

熟悉项目 ing，看到一些很陌生的东西，回来充电

defu

简易 JS 库，支持 TS。递归地分配默认属性。轻量且快速。

1
2
3

import { defu } from 'defu'

const options = defu(object, ...defaults)

该库是用来合并参数（可传对象、数组、函数等）

对象的话，分配默认值时，最左边的参数具有更高的优先级。

1 2	console.log(defu({ a: { b: 2 } }, { a: { b: 1, c: 3 } })) // => { a: { b: 2, c: 3 } }

注意：

对象和默认值未修改
空值（空值和未定义）将被跳过。如果您需要保留或不同的行为，请使用 defaults-deep 或 omit-deep 或 lodash.defaultsdeep。
将跳过 proto 和构造函数键的分配，以防止对象污染的安全问题。
将连接数组值（如果定义了默认属性）

currency

用于货币与数字之间的转换，还可以用于数值的加减乘除（主要是解决浮点数问题，比如经典的 0.1 + 0.2）

默认配置项参数：

precision 2 精确到小数点哪一位
symbol ‘$’ 数字前的符号，一般配置货币符号
decimal ‘.’ 配置小数点符号（替换小数点）
separator 指代分割符，按照三位数一个分割符来格式化 ‘,’

运算：

add 加
subtract 减
multiply 乘
divide 除
distribute 均分

currency(1.1).add(1.2).value() // 2.3
currency(1.1).subtract(1.2).value() // -0.1
currency(2).multiply(3.3).value() // 6.6
currency(1.2).divide(1.2).value() // 1
currency(2.4).distribute(3).value() // [0.8, 0.8, 0.8]

VeeValidate

VeeValidate 是最流行的 Vue.js 表单库。它负责价值跟踪、验证、错误、提交等。

vee-validate 解决了表单的主要痛点，主要是：

表单状态和值跟踪
用户体验
同步和异步验证
处理提交内容

vee-validate 将困难部分抽象为纯逻辑组合，可以使用两种风格来向您的表单添加验证：

Composition API：这是使用 vee-validate 的最佳方式，因为它允许与您现有的 UI 或任何第三方组件库无缝集成。
高阶组件（HOC）：这种方法易于使用，并且严格在模板内使用，如果您的表单简单并且不想编写大量 JavaScript，则可以使用它。

项目中用到的是 Composition API 所以具体还是学习这部分了

https://vee-validate.logaretm.com/v4/guide/composition-api/getting-started/

vee-validate 支持同步和异步验证，并允许使用验证模式在字段级别或表单级别定义规则。

yup 是一个流行的 JavaScript 库，用于验证数据。 @vee-validate/yup

Declaring Forms

表单上下文 Form context

可使用从 vee-validate 核心包导出的 useForm 函数来声明表单。这是一个组合 API 函数，它将当前组件标记为表单。

<script setup>
import { useForm } from 'vee-validate'
const { values } = useForm()
</script>

<template>
  <pre>{{ values }}</pre>
</template>

输出 {}

调用 useForm 在组件中创建一个表单上下文，并将其提供给任何注入它的子组件。这意味着您应该坚持在组件中调用一次 useForm 。创建表单上下文可以做一些事情：

充当您将声明为子组件的所有字段的值收集器。
验证字段并聚合错误。
聚合所有字段的有效性、触及和脏状态。

字段绑定

声明 useForm 后，现在就可以将表单与元素和组件集成。 vee-validate 与您正在使用的 UI 无关。

useForm 提供了一个名为 defineField 的函数。此函数接受字段路径并返回值模型和包含输入元素绑定的对象。

添加校验

<script setup>
import { useForm } from 'vee-validate'
import * as yup from 'yup'

const { values, errors, defineField } = useForm({
  validationSchema: yup.object({
    email: yup.string().email().required(),
  }),
})

const [email, emailAttrs] = defineField('email')
</script>

<template>
  <input
    v-model="email"
    v-bind="emailAttrs"
  />

  <pre>values: {{ values }}</pre>
  <pre>errors: {{ errors }}</pre>
</template>
<!-- 
values: {
  "email": "112"
}
errors: {
  "email": "email must be a valid email"
} -->

这样写，当 v-model 改变时就会触发校验（频繁会影响性能）

可以通过将配置传递给 DefineField 来使其“惰性”，即 blur 后再校验错误

1
2
3

const [email, emailAttrs] = defineField('email', {
  validateOnModelUpdate: false,
})

与 HTML 输入类似，您可以使用相同的 DefineField 函数获得相同的结果。
按照前面的例子，我们可以像这样实现等价效果：

请注意，对于组件，验证会立即执行。这是因为组件实现在整个 Vue 生态系统中并未标准化，因为无法保证它会发出与原生 HTML 元素相同范围的事件。但是，如果您知道正在使用的组件正在发出正确的事件来支持该行为，则可以自定义验证触发器。

映射 attributes and props

vee-validate 添加到这些绑定对象的属性和侦听器之外，您还可以映射 in 的属性和 props。当您想要执行以下操作时，这非常有用：

当您想要将属性/道具映射到不同的名称时。
根据字段状态将新属性/道具传递给组件/元素。
您可以使用 props 来包含需要添加到组件/元素的任何其他 props 或属性。

… 省略