Laravel Inertia：如何合并关联表数据传递至Edit视图？

我需要从index视图向edit视图传递来自两个关联表（父表personas和子表residentes）的数据。目前在ResidentesController的edit()方法中开发，但无法将数据封装到单个对象中，请问是否可行？如果不可行，最佳实现方式是什么？

当前实现代码：

public function edit(Residente $residente)
{
    $persona = Persona::find($residente->persona_id);

    return Inertia::render(
        'Residentes/Editar',
        [
            'residente' => $residente,
            'persona' => $persona
        ]
    );
}

解决方案：利用Eloquent关联实现单对象封装 #

完全可以把两个表的数据封装到单个对象中，推荐通过Eloquent关联预加载实现，既符合Laravel的设计规范，还能避免N+1查询问题，代码更简洁高效。

1. 先在Residente模型定义关联 #

确保Residente模型已与Persona建立关联关系：

// app/Models/Residente.php
class Residente extends Model
{
    // ...其他模型配置

    public function persona()
    {
        // 关联父表personas，默认外键为persona_id
        return $this->belongsTo(Persona::class);
    }
}

2. 在Controller中预加载关联数据 #

修改edit方法，通过load()预加载关联的persona数据，此时residente对象会自动包含关联的persona信息：

public function edit(Residente $residente)
{
    // 预加载关联的persona数据
    $residente->load('persona');

    return Inertia::render(
        'Residentes/Editar',
        [
            'residente' => $residente
        ]
    );
}

3. 前端视图中访问关联数据 #

在Inertia的Editar组件里，直接通过residente.persona即可访问关联的persona字段：

// 示例Vue组件代码
<template>
  <div class="edit-residente">
    <h2>编辑居民信息</h2>
    <div>
      <label>姓名：</label>
      <input type="text" v-model="residente.persona.nombre" />
    </div>
    <div>
      <label>居民编号：</label>
      <input type="text" v-model="residente.codigo" />
    </div>
  </div>
</template>

<script setup>
import { usePage } from '@inertiajs/vue3';
const { props } = usePage();
const residente = props.residente;
</script>

替代方案：手动合并数据 #

如果不想依赖Eloquent关联，也可以手动将两个模型的数据合并为单个对象传递：

public function edit(Residente $residente)
{
    $persona = Persona::find($residente->persona_id);

    // 合并为单个对象
    $combinedData = (object) array_merge(
        $residente->attributesToArray(),
        ['persona_info' => $persona->attributesToArray()]
    );

    return Inertia::render(
        'Residentes/Editar',
        [
            'residente' => $combinedData
        ]
    );
}

不过这种方式会多一次数据库查询，代码维护性也不如关联方案，优先推荐第一种预加载关联的实现方式。

内容的提问来源于stack exchange，提问作者Ubaldo Villaba