Livewire & Laravel 8 全局组件跨业务场景更新数值问题咨询

前置调整：将纯Blade展示组件改为Livewire组件 #

你目前用的<x-points>这类是静态Blade组件，无法自动响应Livewire的状态变更，首先需要将三个展示组件改造为Livewire组件：

• 执行命令生成对应Livewire组件：

php artisan make:livewire Points
php artisan make:livewire Lifes
php artisan make:livewire RemainingLifes

• 分别编辑三个组件的类文件（路径为app/Http/Livewire/下），示例参考（以Points组件为例）：

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Illuminate\Support\Facades\Auth;

class Points extends Component
{
    public $count;

    // 初始化数值
    public function mount()
    {
        $this->count = Auth::user()->points ?? 0;
    }

    // 监听更新事件后刷新数值
    public function refreshValue()
    {
        $this->count = Auth::user()->points ?? 0;
    }

    // 注册事件监听器
    protected $listeners = [
        'updateUserStats' => 'refreshValue'
    ];

    public function render()
    {
        return view('livewire.points');
    }
}

另外两个Lifes、RemainingLifes组件按照相同逻辑修改，refreshValue方法内分别读取对应用户的总生命数、剩余生命数字段即可。

• 编辑三个组件的视图文件（路径为resources/views/livewire/下），直接输出绑定的公共属性即可，比如points.blade.php内容：

{{ $count }}

• 替换导航栏中原组件引用，注意给Livewire组件添加唯一key避免渲染冲突：

<livewire:points :key="'user-points-' . auth()->id()" />
<livewire:lifes :key="'user-lifes-' . auth()->id()" />
<livewire:remaining-lifes :key="'user-remaining-lifes-' . auth()->id()" />

提示：你原代码里remaining-lifes的闭合标签存在拼写错误，注意修正为正确的拼写

业务逻辑侧触发更新 #

你提到的三个业务操作对应的Answer.php、Regenerate.php、Tips.php如果都是Livewire组件，只需要在对应操作逻辑执行完成后，触发全局更新事件即可：

// 以Answer.php的答题完成逻辑为例
public function submitAnswer()
{
    // 原有答题逻辑...
    // 逻辑执行完成后触发更新事件
    $this->emit('updateUserStats');
}

Regenerate.php的页脚操作逻辑、Tips.php的扣减逻辑执行完成后，都添加一行$this->emit('updateUserStats');即可，三个展示组件监听到事件后会自动刷新对应数值。

特殊场景兼容 #

如果你的三个业务操作是普通控制器方法而非Livewire组件，可以在控制器逻辑执行完成后，返回响应时触发浏览器自定义事件，在前端监听事件后通知Livewire更新：

// 控制器内逻辑完成后
return redirect()->back()->with('status', '操作完成')->with('dispatchEvent', 'updateUserStats');

然后在全局模板中添加监听代码：

window.addEventListener('load', () => {
    if (window.Livewire) {
        Livewire.on('updateUserStats', () => {
            Livewire.emit('updateUserStats');
        });
    }
});

内容的提问来源于stack exchange，提问作者Filipe