laravel+inertia+vue 中 Axios 与惯性 useForm

Question

在以 vue 作为前端的 Laravel 中，使用惯性，哪种方法更适合将表单数据发送到后端； axios 或 ineria 提供的方法？另外，如果我使用惯性，我是否需要从客户端验证（使用像 vee-validate 这样的库）？

const response = await axios.post(url, formData)

提供了更多的灵活性，但是

form = useForm(formData); 
form.post(url)

很简单，并且有一些很好的属性和方法，如 form.errors、form.processing、form.transform() 等。

Answer 1

每种方法都有其优点和缺点。以下比较可帮助您确定哪个更适合您的用例。

1。使用 Axios 使用 Axios 时，您可以完全控制表单的提交方式以及如何处理响应：

const response = await axios.post(url, formData);

优点：

• 灵活性：您可以自定义请求标头，管理身份验证 令牌，或添加其他配置（例如，使用拦截器）。

• 完全控制：您可以直接处理错误/成功响应并且可以
  选择如何显示验证错误或处理状态。

• 用途广泛：Axios 被广泛采用，可用于任何类型
  HTTP 请求（GET、POST、PUT、DELETE 等）。

缺点：

• 手动错误处理：您需要手动处理验证错误， 处理状态以及与表单提交相关的其他 UI 元素。

• 样板代码：对于每种表单，您最终可能会重复很多次 类似的代码，例如捕获错误、更新状态，以及 管理表单数据。

2。使用 Inertia 的 useForm Helper

Inertia 提供了一个简单的 useForm 帮助器来管理表单数据、提交和验证错误。这使得处理表单变得更加容易。

const form = useForm({
    name: '',
    email: '',
    // other form fields
});

form.post(url);

优点：

• 内置表单处理：Inertia 的 useForm 提供了一些有用的 属性和方法。
• 减少样板：惯性自动处理诸如 设置验证错误、表单提交状态以及 成功/失败回调，因此您不必编写重复的内容 代码。
• 通过 Inertia 进行简化： 由于 Inertia 是为处理表单而构建的 提交，它与 Laravel 的验证无缝集成 重定向。

缺点：

• 灵活性较低：如果您需要更多微调控制（例如自定义 标头、身份验证令牌、高级错误处理）、useForm 可能会感到受到限制。
• 与惯性相关：如果您想从惯性切换到惯性 不同的前端框架，你需要重构所有表单 使用 useForm。

哪个更好？

这取决于您的需求：

如果您需要灵活性（例如，设置标头、使用身份验证令牌、自定义错误处理），那么 Axios 可能是更好的选择。

如果您喜欢简单性并且希望避免编写表单提交、错误处理和处理状态的样板代码，那么 Inertia 的 useForm 帮助器就是您的最佳选择。它与 Laravel 的验证系统很好地集成，并显着简化了流程。

我最喜欢惯性，它非常酷。