如何加快livewire中的请求?

Question

我已经做了一个非常简单的配置文件卡与两个视图一次显示我的配置文件id，名称和电子邮件和第二个视图只是显示这三个属性的输入字段。

这是工作，但它是"非常"慢。当我在显示视图上点击编辑按钮时，加载编辑视图需要超过650毫秒(在最好的情况下，有时需要超过1.2秒)，反之亦然。

我怎样才能使它更快一点呢?

配置组件:

namespace AppHttpLivewireUser;
use AppUser;
use IlluminateValidationRule;
use LivewireComponent;
class Profile extends Component
{

public $user, $user_id, $name, $email;
public $updateMode = false;
public function mount(User $user)
{
$this->user = $user;
$this->user_id = $user->id;
$this->name = $user->name;
$this->email = $user->email;
}
public function render()
{
return view('livewire.user.profile.resource');
}
public function edit()
{
$this->updateMode = true;
}
public function cancel()
{
$this->updateMode = false;
}
public function submit()
{
$attributes = $this->validate([
'name' => 'required|min:6',
'email' => ['required', 'email', Rule::unique('users')->ignore($this->user->id)],
]);

$this->user->update($attributes);
$this->updateMode = false;
}
}

下面是视图:resource.blade.php:

<div class="p-3">
@includeWhen(!$updateMode,'livewire.user.profile.show')
@includeWhen($updateMode,'livewire.user.profile.edit')
</div>

show.blade.php:

<div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Id:</span>
</div>
<div class="w-3/4" >
<span class="text-gray-700 font-semibold">{{ $user_id }}</span>
</div>
</div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Name:</span>
</div>
<div class="w-3/4" >
<span class="text-gray-700 font-semibold">{{ $name }}</span>
</div>
</div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Email:</span>
</div>
<div class="w-3/4" >
<span class="text-gray-700 font-semibold">{{ $email }}</span>
</div>
</div>
<!-- Editing Buttons -->
<div class="pt-3">
<button type="button" wire:click.prevent="edit" class="py-1 px-2 rounded bg-blue-500 text-white font-semibold">Edit</button>
</div>
</div>

edit.blade.php:

<form wire:submit.prevent="submit">
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Id:</span>
</div>
<div class="w-3/4" >
<span class="text-gray-700 font-semibold">{{ $user_id }}</span>
</div>
</div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Name:</span>
</div>
<div class="w-3/4" >
<input type="text" class="w-1/2 border appearance-none py-1 px-2 rounded shadow focus:outline-none" wire:model="name">
</div>
</div>
<div class="flex items-center py-2">
<div class="w-1/4">
<span class="text-gray-800">Email:</span>
</div>
<div class="w-3/4" >
<input type="text" class="w-1/2 border appearance-none py-1 px-2 rounded shadow focus:outline-none" wire:model="email">
</div>
</div>
<!-- Editing Buttons -->
<div class="pt-3">
<button type="submit" class="py-1 px-2 rounded bg-blue-500 text-white font-semibold" >Save</button>
<a href="#" class="ml-2 text-red-500 font-semibold" wire:click.prevent="cancel">Cancel</a>
</div>
</form>

Answer 1

我遇到了同样的问题，使用相同的实现方法。我还注意到，当Livewire改变状态以显示/隐藏表单时，它有点慢，所以我所做的是使用Alpine.js来确定是否显示表单。

<div x-data="{ mode: 'view' }">
<div x-show="mode === 'edit'">
<div>
<!-- display form here -->
</div>
<button wire:click="update">
Save
</button>
<button @click.prevent="mode = 'view'">
Cancel
</button>
</div>
<div x-show="mode !== 'edit'">
<div>
<!-- profile displayed here -->
</div>
<button @click.prevent="mode = 'edit'">
Edit
</button>
</div>
</div>

这样做解决了显示表单的问题，感觉非常灵活和快速。我遇到了一个不同的问题，因为我不知道如何解决。

如果我开始在表单中输入更新名称，并在更新组件属性的请求完成之前快速点击保存按钮，那么在我点击保存按钮时，无论属性是什么都将被保存到数据库中，从而创建竞争条件。

我对Livewire范式还比较陌生，所以我还没有一个很好的答案。