mcpField
L
livewire-development

livewire-development

github.com/coollabsio开发65.6k62 次安装今天更新
代码仓库

关于 livewire-development

此 Skill 为 Laravel 应用中的 Livewire 3 开发提供指导，涵盖组件规范、服务端状态、验证与授权、生命周期钩子、JavaScript 集成和测试。

主要功能

  1. 01创建 Livewire 组件
  2. 02将状态保留在服务端
  3. 03验证并授权操作
  4. 04使用 v3 指令与钩子
  5. 05测试组件和页面

适用场景

  1. 01构建响应式 Laravel 界面
  2. 02将 Livewire 2 写法更新到 v3
  3. 03测试组件行为

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/coollabsio/coolify --skill livewire-development

安装后在 Claude Code 中输入/livewire-development确认已加载。

详细介绍

Livewire 开发

文档

使用 search-docs 查阅 Livewire 3 的详细模式和文档。

基本用法

创建组件

使用 php artisan make:livewire [Posts\CreatePost] Artisan 命令创建新组件。

基本概念
  • 状态应保存在服务器上，界面应反映这些状态。
  • 所有 Livewire 请求都会发送到 Laravel 后端；它们与常规 HTTP 请求类似。在 Livewire 操作中，务必验证表单数据并执行授权检查。

Livewire 3 特性

与 Livewire 2 相比的主要变化

以下内容在 Livewire 3 中有所变化，但应用中可能尚未更新。请确认此应用的配置，以确保遵循现有惯例。

  • 使用 wire:model.live 实现实时更新；wire:model 现在默认延迟更新。
  • 组件现在使用 App\Livewire 命名空间（而非 App\Http\Livewire）。
  • 使用 $this->dispatch() 分发事件（而非 emit 或 dispatchBrowserEvent）。
  • 典型布局路径使用 components.layouts.app 视图（而非 layouts.app）。
新指令
  • 可使用 wire:show、wire:transition、wire:cloak、wire:offline、wire:target。
Alpine 集成
  • Alpine 现在已包含在 Livewire 中；不要手动引入 Alpine.js。
  • Alpine 中包含的插件：persist、intersect、collapse 和 focus。

最佳实践

组件结构
  • Livewire 组件必须只有一个根元素。
  • 使用 wire:loading 和 wire:dirty，打造流畅的加载状态。
在循环中使用键
@foreach ($items as $item)
    <div wire:key="item-{{ $item->id }}">
        {{ $item->name }}
    </div>
@endforeach
生命周期钩子

优先使用 mount()、updatedFoo() 等生命周期钩子进行初始化和响应式副作用处理：

public function mount(User $user) { $this->user = $user; }
public function updatedSearch() { $this->resetPage(); }

JavaScript 钩子

你可以监听 livewire:init，以接入 Livewire 初始化过程：

document.addEventListener('livewire:init', function () {
    Livewire.hook('request', ({ fail }) => {
        fail(({ status, preventDefault }) => {
            if (status === 419) {
                preventDefault();
                alert('Your session expired');
            }
        });
    });

    Livewire.hook('commit', ({ fail }) => {
        fail(() => console.error('Livewire commit failed'));
    });
});

测试

Livewire::test(Counter::class)
    ->assertSet('count', 0)
    ->call('increment')
    ->assertSet('count', 1)
    ->assertSee(1)
    ->assertStatus(200);

$this->get('/posts/create')
    ->assertSeeLivewire(CreatePost::class);

常见问题

  • 在循环中忘记添加 wire:key，会导致项目变化时出现意外行为
  • 使用 wire:model 并期待实时更新（在 v3 中应改用 wire:model.live）
  • 未在 Livewire 操作中进行验证或授权（应将其视为 HTTP 请求）
  • Livewire 3 已捆绑 Alpine.js，却又单独引入

评论

支持 Markdown