如何在 InertiaJS 中从控制器安全传递数据到 Vue 组件-php教程-PHP中文网

如何在 InertiaJS 中从控制器安全传递数据到 Vue 组件

本文详解如何通过 inertia::render() 正确将 eloquent 数据从 laravel 控制器传递至 vue 组件，涵盖路由配置、控制器返回格式、组件 props 声明及常见错误规避。

本文详解如何通过 inertia::render() 正确将 eloquent 数据从 laravel 控制器传递至 vue 组件，涵盖路由配置、控制器返回格式、组件 props 声明及常见错误规避。

在 InertiaJS 生态中，控制器不能直接返回 Eloquent 集合（如 Product::all()），而必须通过 Inertia::render() 显式封装数据并渲染对应前端页面。这是 Inertia 的核心约定：服务端负责“渲染 + 数据注入”，而非仅返回原始数据。

✅ 正确做法：在控制器中使用 Inertia::render()

修改你的 ProductController@index 方法如下：

use Inertia\Inertia;
use App\Models\Product;

public function index()
{
    return Inertia::render('App', [
        'products' => Product::all(), // 数据以键值对形式传入
    ]);
}

⚠️ 注意：Product::all() 返回的是 Eloquent Collection，Inertia 会自动将其序列化为 JSON 兼容数组，无需手动 ->toArray()（除非需深度定制结构）。

?️ 配置标准资源路由

在 routes/web.php 中注册标准控制器路由（不要用闭包路由调用静态方法）：

use App\Http\Controllers\ProductController;

Route::get('/products', [ProductController::class, 'index'])->name('products.index');

✅ 这样可确保请求完整经过控制器生命周期（中间件、依赖注入等），且 Inertia 能正确识别并处理响应。

Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

?️ 在 Vue 组件中接收并使用数据

前端组件需声明 props 接收同名变量，并确保命名与控制器传递的键一致（此处为 'products'）：

<template><div class="product-list">
    <h2>共 {{ products.length }} 个商品</h2>
    <ul>
<li v-for="product in products" :key="product.id">
        {{ product.name }} — ¥{{ product.price }}
      </li>
    </ul>
</div>
</template><script>
export default {
  props: {
    products: {
      type: Array,
      required: true,
      default: () => []
    }
  }
}
</script>

? 提示：建议为 props 添加 required: true 和 default，提升组件健壮性；Inertia 默认将服务端数据作为顶层 props 注入，无需额外 setup() 或 fetch。

❌ 常见错误与规避

错误写法：return Product::all(); → Inertia 无法识别，返回纯 JSON，前端收不到 props；
错误路由：Inertia::render('App', [ProductController::class, 'index']) → 尝试将类方法数组当作数据传入，实际会报错或渲染空对象；
命名不一致：控制器传 'products'，但组件 props 写 index → 数据无法绑定，products 为 undefined。