如何使用 InertiaJS 從控制器返回數據

Question

這是我的產品控制器

public function index()
{
  return Product::all();
}

我正在尋找一種方法將此方法從慣性請求返回到我的 Vue 組件，這是我嘗試過的方法，

路線/web.php

Route::get('/', function () {
  return Inertia::render('App', [ProductController::class, 'index']);
});

這是我的 Vue 組件（與我嘗試獲取數據的方式不同）

<template>

</template>

<script>
props: {
  index: Array,
},
</script>

Answer 1

在您的控制器中，您可以將產品列表傳遞給您的組件：

public function index()
{
  return Inertia::render('App', [
    'products' => Product::all()
  ]);
}

文檔： https ://inertiajs.com/responses

然后像這樣聲明你的路線：

Route::get('/products', [ProductController::class, 'index']);

這將創建一個/products路由，該路由將指向您的控制器的 index 操作，該操作會將產品列表返回給您的組件。

在您的組件中，您可以訪問產品：

<template>
  <div>
    {{ products.length }}
  </div>
</template>

<script>
props: {
  products: Array,
},
</script>