Mirage JS 深入探究了解工厂装置和序列化器（第 2 部分）
在 Mirage JS 深入研究系列的第二部分中，我们将了解 Mirage JS 的工厂、固定装置和序列化器。我们将了解他们如何使用 Mirage 实现快速 API 模拟。 在本系列的上一篇文章中，我们深入研究了与 Mirage 相关的模型和关联。我解释说，模型允许我们创建动态模拟数据，当 Mirage 向我们的模拟端点发出请求时，它会将这些数据提供给我们的应用程序。在本文中，我们将了解其他三个 Mirage 功能，它们可以实现更快速的 API 模拟。让我们开始吧！ 注意：如果您还没有真正掌握此处讨论的内容，我强烈建议您阅读我的前两篇文章。不过，您仍然可以在必要时继续阅读并参考以前的文章。 使用 Mirage JS 和 Vue 设置 API 模拟 Mirage JS 模型和关联 工厂 # 在上一篇文章中，我解释了如何使用 Mirage JS 来模拟后端 API，现在假设我们正在 Mirage 中模拟产品资源。为了实现这一点，我们将创建一个路由处理程序，它将负责拦截对特定端点的请求，在本例中，端点是。我们创建的路线处理程序将返回所有产品。下面是在 Mirage 中实现此目的的代码：
与工厂结合的固定装置
想象一下我是一名开发人员，我的任务只负责搜索部分。我现在无法拆分该组件，因为这两个功能在某种程度上是交叉的。我搜索一些结果并对它们进行排序。我需要从数据跳转到方法，从方法跳转到计算，最后很难切换上下文。特别是当组件变得非常大时。 娜塔莉亚： 中有哪些选项？第一个选项称为 只是一个对象，它可以包含组件可以具有的相同属性巴林手机号码列表我们将它们与组件混合在一起。听起来不错，我可以将所有搜索移到那里，有什么问题吗？有几个。首先，这完全不灵活。如果我想搜索某个端点并将其移动到 mixin，这将是我可以搜索的唯一端点。Mixin 不接受参数。我创建了一个mixin，它是完全静态的。第二个问题是混合了 mixin，这意味着对于某些属性来说，它就像合并一样发生。例如，如果您创建了挂钩，它将被合并。mixin 组件的生命周期钩子中的所有逻辑都合并在一起。但如果你有一个数据属性，mixin 中的冷查询，如果您在组件中也有相同的查询，则组件具有优先级
工厂与固定装置
要使用 Mirage JS 序列化器，您必须选择从哪个内置序列化器开始。此决定将受到后端最终发送到前端应用程序的 JSON 类型的影响。Mirage 包含以下序列化器： JSONAPISerializer 该序列化器遵循JSON:API 规范。 ActiveModelSerializer 该序列化器旨在模仿类似于使用active_model_serializer gem构建的 Rails API 的 API 。 RestSerializer Mirage JS是RestSerializer适用于其他 AERO 领先 常见 API 的“catch all”序列化器。 在 Smashing 杂志上做广告 序列化器定义 # 要定义序列化，请导入适当的序列化器，RestSerializer例如miragejs： import { Server, RestSerializer } from “miragejs” 复制 然后在Server实例中： new Server({ serializers: { application: RestSerializer, }, }) 复制 RestSerializerMirage JS 默认使用它。所以显式设置它是多余的。上面的代码片段仅用于示例目的。 让我们看看上面定义的同一路由处理程序上JSONAPISerializer和的输出ActiveModelSerializer
