代码之家 › 专栏 › 技术社区 › Mofid

如何在livewire中加速请求?

laravel-livewire laravel

1

Mofid · 技术社区 · 2 年前

我做了一个非常简单的配置文件卡,有两个视图,一个是显示配置文件id、名称和电子邮件,另一个视图只是显示这三个属性的输入字段。

这是可行的,但速度很慢。当我点击show view上的Edit按钮时,加载Edit view需要650ms以上(在最佳情况下,有时需要超过1.2sec),反之亦然。

配置文件组件:

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;
    }

}

资源刀身php:

<div class="p-3">

  @includeWhen(!$updateMode,'livewire.user.profile.show')

  @includeWhen($updateMode,'livewire.user.profile.edit')

</div>

显示刀身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>

<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>

1 回复 | 直到 2 年前

1

0

Firooz Meysami 2 年前

<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>

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

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

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