在前后端消息传递过程中，我们通常会使用JSON的 errors 字段来传递错误信息。一个良好的错误消息格式范例如下：

{
  errors: {
    global: ["网络错误"],
    password: ["至少需要一个大写字母", "至少需要八位字符"]
  }
}

errors 字段中，字段名代表出错位置（例如输入框），内容为一个数组，每个字符串代表一个错误。

为了处理错误消息，我们可以在composables文件夹中新建一个 error.ts 文件，存储共用的逻辑，例如错误消息处理：

import { ref, Ref } from 'vue';

export interface ErrorFields {
  global: string[];
  [key: string]: string[];
}

export function useErrorFields(fields: string[]) {
  const errors: Ref = ref({ global: [], ...fields.reduce((acc, field) => ({ ...acc, [field]: [] }), {}) });
  // 其他处理函数...
  return { errors, clearErrors, hasErrors, addError, removeError };
}

在组件中，我们可以这样使用定义的 useErrorFields 工具：

接下来，我们需要定义提交函数，例如这里使用axios进行后端访问，后端地址用环境变量提供：

function onSubmit() {
  // 后端访问逻辑...
}

这样，后端返回错误信息时，错误状态会被自动更新。如果出现了网络错误或其他错误，addError类会在global字段上增加错误。

将错误状态绑定到页面，例如将错误状态显示在输入框下：

这里我们使用了clearErrors函数来清除错误状态中的全部错误，使用hasErrors函数来检测对应位置是否出现错误。

全局消息可以显示在表格顶端：

  // 全局错误消息显示逻辑...

提交按钮在有错误时不允许点击：

  注册

如果你需要一个完整案例，可以查看错误状态处理在用户注册场景的案例，前端开源，详见： Github 。你也可以访问 Githubstar.pro 来查看网页的效果（一个Github互赞平台，前端按本文方式进行错误处理）。

感谢阅读，如果本文对你有帮助，可以订阅我的博客，我将继续分享前后端全栈开发的相关实用经验。祝你开发愉快。