首页　>　文章列表　>　理解Inertiajs：与Laravel的综合反应和vue整合指南

理解Inertiajs：与Laravel的综合反应和vue整合指南

248 2025-04-15

Inertiajs 2.0 的新特性及与Laravel、React/Vue 集成的全面指南

Inertiajs 2.0带来了诸多改进，提升了开发体验。让我们深入探讨其核心功能和最佳实践。

核心功能:

服务器端渲染 (SSR) 支持: 提升SEO和初始加载速度。
增强的表单处理: 包含自动CSRF保护和验证。
改进的资源加载: 优化资源加载效率。
更佳的状态管理: 简化应用状态管理。
高级路由功能: 更灵活的路由配置。

页面和组件:

Inertiajs中的页面映射到Laravel路由中的React/Vue组件。以下是一个简单的用户列表页面示例：

// resources/js/pages/users/index.jsx
import { head } from '@inertiajs/react'

export default function users({ users }) {
  return (
    <div className="container">
      {users.map(user => (
        <div key={user.id}>
          {user.name}
        </div>
      ))}
    </div>
  )
}

路由和导航:

Inertiajs与Laravel路由系统无缝集成，提供客户端导航：

// web.php
Route::get('/users', [UserController::class, 'index'])->name('users.index');

// client-side navigation
import { Link } from '@inertiajs/react'

function Navigation() {
  return (
    <Link className="nav-link" href={route('users.index')} preserveScroll={true}>
      Users
    </Link>
  )
}

表单和数据处理:

Inertiajs 2.0 提供了增强的表单处理，带有自动CSRF保护和验证。

文件上传:

Inertiajs 2.0 简化了文件上传，并支持进度跟踪：

import { useForm } from '@inertiajs/react'

export default function FileUpload() {
  const { data, setData, post, progress } = useForm({
    document: null,
  })

  function submit(e) {
    e.preventDefault()
    post(route('documents.store'), {
      forceFormData: true
    })
  }

  return (
    <form onSubmit={submit}>
      <input type="file" onChange={e => setData('document', e.target.files[0])} />
      {progress && (
        <progress max="100" value={progress.percentage}>
          {progress.percentage}%
        </progress>
      )}
      <button type="submit">Upload</button>
    </form>
  )
}

共享数据和Props:

Inertiajs允许在所有组件中共享数据：

// app/Providers/AppServiceProvider.php
public function boot()
{
    Inertia::share([
        'app' => [
            'name' => config('app.name'),
        ],
        'auth' => fn () => [
            'user' => auth()->user() ? [
                'id' => auth()->user()->id,
                'name' => auth()->user()->name,
            ] : null,
        ],
    ]);
}

部分重新加载和延迟Props:

Inertiajs 2.0 支持部分页面重新加载和延迟加载Props，优化性能。

状态管理:

Inertiajs 2.0 提供内置状态保存机制。

高级功能:

预取: 使用 <Link href="/users" prefetch></Link> 提升页面加载速度。
轮询: 使用 router.reload() 实现实时更新。
可见时加载: 使用 useIntersectionObserver 优化性能。

Inertiajs 2.0 的优缺点:

优点	缺点
Laravel 无缝集成	新开发者学习曲线较陡峭
无需API样板代码	仅限于服务器端路由
全栈开发体验	前端和后端耦合度较高
内置安全特性	可能不适合所有用例（例如移动应用）
渐进式增强	初始页面加载可能较慢
SEO友好（通过SSR）	需要服务器端渲染设置
自动资源版本控制	框架特定限制