Inertia项目无需手动对接API接口，因页面数据由Laravel控制器通过Inertia::render()一次性序列化注入$page.props，手动使用axios/fetch会绕过其状态同步机制、丢失中间件能力并导致多状态源混乱。
Inertia 项目里根本不需要“对接后端接口”——你写的是控制器返回 Inertia::render()，不是写 axios.get()。
为什么不能用 axios/fetch 去调 Laravel Inertia 后端
因为 Inertia 的设计哲学就是「服务端驱动」：页面数据由 Laravel 控制器一次性拼好、序列化、注入到前端组件的 $page.props 中。你手动发请求，绕过了 Inertia 的状态同步机制，会导致：
- 表单提交后页面不刷新，但
axios拿到的新数据不会自动更新 Vue 组件（ref或reactive不会响应） - 导航时（比如点击
<InertiaLink>）Inertia 会清空旧 props，你手写的axios请求结果可能被丢弃或错位 - 丢失 Laravel 的中间件能力（认证、CSRF、session、日志等）——这些在纯 API 调用里得自己重做
正确传数据：用 Inertia::render() 的第二个参数
控制器里直接把 PHP 数据塞进数组，Inertia 自动序列化并挂载到前端 $page.props：
public function show(User $user)
{
return Inertia::render('User/Show', [
'user' => $user->only(['id', 'name', 'email']),
'posts' => $user->posts()->latest()->take(5)->get(['id', 'title', 'published_at']),
'can_edit' => Auth::user()?->can('update', $user),
]);
}
注意几个关键点：
立即学习“前端免费学习笔记（深入）”；
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 别传 Eloquent 模型实例（如
$user），要用->toArray()或->only()显式控制字段，否则会带大量未序列化属性甚至循环引用 - 关系数据必须显式加载（
with('posts')），否则前端访问user.posts会是undefined - 敏感字段（
password_hash、remember_token、api_token）绝对不能出现在这个数组里——Inertia 数据走明文 HTTP - 大数据量（比如
User::all()）直接传会卡死首屏，该分页就用paginate()，该懒加载就用loadMore()+router.reload()
前端怎么安全取值：Vue 3 的 defineProps + 类型守门
在 resources/js/Pages/User/Show.vue 里，不要靠 usePage().props.user 随意读取，要声明契约：
const props = defineProps({
user: {
type: Object,
required: true,
default: () => ({ id: 0, name: '', email: '' })
},
posts: {
type: Array,
required: true,
default: () => []
}
})
这样做的好处：
- 开发时 TypeScript/Volar 能校验字段是否存在、类型是否匹配
- 如果后端漏传
posts，Vue 不会报错但会用空数组兜底，避免Cannot read property 'map' of undefined - 配合
spatie/laravel-data可进一步把user声明为UserData类型，实现服务端→前端全链路类型对齐
真需要发请求？只在明确脱离页面生命周期时用
比如导出 Excel、触发异步任务、轮询后台状态——这些不属于「页面渲染数据」范畴，才该用 axios：
- 必须手动加
X-Inertia头（axios.defaults.headers.common['X-Inertia'] = 'true'），否则 Laravel 会当普通请求处理，返回完整 Blade 页面 - 不要在
mounted()里默认发请求，优先考虑用Inertia::render()一次给全；只有真正动态、非首屏必需的数据才延迟拉 - 若请求结果要更新当前页面状态，别直接改
props，用usePage().props.value = {...}或更稳妥的router.reload()
最常被忽略的一点：Inertia 的「无刷新」体验，本质是靠服务端精确控制哪些数据该来、什么时候来。一旦你开始混用 axios 和 Inertia::render()，就等于在同一个页面里同时维护两套状态源——调试成本会指数级上升。
