第 4 部分 - 种子

我们已经修复了 GET 和 POST 路由处理程序，但我们的应用程序从空状态开始。我们可以使用 seeds 钩子来用一些初始数据填充 Mirage。

将这些代码行复制到您的服务器定义中

import { createServer, Model } from "miragejs"

export default function () {
  createServer({
    models: {
      reminder: Model,
    },

    seeds(server) {
      server.create("reminder", { text: "Walk the dog" })
      server.create("reminder", { text: "Take out the trash" })
      server.create("reminder", { text: "Work out" })
    },

    routes() {
      this.get("/api/reminders", (schema) => {
        return schema.reminders.all()
      })

      this.post("/api/reminders", (schema, request) => {
        let attrs = JSON.parse(request.requestBody)

        return schema.reminders.create(attrs)
      })
    },
  })
}

保存后，您应该看到应用程序重新加载，并使用这三个提醒作为其初始数据。

The server.create 函数允许我们在 Mirage 的数据层中创建新的提醒。ID 会自动分配，就像我们在路由处理程序中调用 reminders.create() 时一样。

尝试使用应用程序创建一个第四个提醒“购买杂货”。如果您检查响应，您应该看到新提醒的 ID 为 4。此外，如果您导航到关于页面并返回，您将看到所有四个提醒按预期显示。

Mirage 的种子在初始化时加载，并与您在浏览器中与应用程序交互时从路由处理程序创建或修改的任何数据一起使用，因此所有 API 数据保持一致。

收获

  • 使用 seeds 钩子和 server.create 为您的服务器创建初始数据