如何在直播中加快请求速度？

Question

我制作了一个非常简单的配置文件卡，有两个视图--一次显示概要文件id、名称和电子邮件，第二个视图只显示这三个属性的输入字段。

这是可行的，但它“非常”缓慢。当我点击显示视图上的Edit按钮时，加载编辑视图需要650 on以上(在最好的情况下，有时需要超过1.2秒)，反之亦然。

我怎么能让这件事再快一点呢？

概况构成部分：

namespace App\Http\Livewire\User;

use App\User;
use Illuminate\Validation\Rule;
use Livewire\Component;

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范式，我还是比较新的，所以我还没有一个很好的答案。