在 js 中监听 laravel livewire 生命周期钩子

Posted 2023-02-21

【中文标题】在 js 中监听 laravel livewire 生命周期钩子

【英文标题】：Listen the laravel livewire lifecycle hooks in js

【发布时间】：2022-01-22 12:17:18

【问题描述】：

有没有办法收听laravel livewire lifecycle hooks？比如……

在php中是：

 public function updatedFoo($value)
 
    //
 

如何在 js 中实现（我知道使用 @this 生成 id finder）？

window.Livewire.find('componentIdGenerated').on('updatedFoo', function(value) 
   //
);

非常感谢！

【参考方案1】：

这是可能的，而且非常酷。正如文档所述，有一些 javascript 钩子相关，如

<script>
    document.addEventListener("DOMContentLoaded", () => 
        ....
        Livewire.hook('message.sent', (message, component) => )
        Livewire.hook('message.failed', (message, component) => )
        Livewire.hook('message.received', (message, component) => )
        Livewire.hook('message.processed', (message, component) => )
    );
</script> 

比方说，你对某个方法进行了一些调用，并使用它可以获取消息挂钩并进行适当的操作

<script>
    document.addEventListener("DOMContentLoaded", () => 
       Livewire.hook('message.sent', (message,component) => 
          if (message.updateQueue[0].payload.method === 'openModal') 
             // message was sent 
          
       Livewire.hook('message.received', (message,component) => 
          if (message.updateQueue[0].payload.method === 'openModal') 
             // message was received 
          
       // and go on!
</script>

你也可以在事件发生时监听并做同样的事情

<script>
    document.addEventListener("DOMContentLoaded", () => 
       Livewire.hook('message.sent', (message,component) => 
          if (message.updateQueue[0].payload.event === 'someDispatchedEvent') 
             // message was sent 
          
       Livewire.hook('message.received', (message,component) => 
          if (message.updateQueue[0].payload.event === 'someDispatchedEvent') 
             // message was received 
          
       // and go on!
</script>

希望你能更多地利用这一点，向我们展示你的表现！ ;-)

【参考方案2】：

感谢@Prospero 提供第一步和有关必要代码的总体思路

首先我们需要保存属性的初始状态（在我的例子中是一个模态组件，id 是动态的）：

括号中的变量为刀片变量）

...
@php
$id = $id ?? \Illuminate\Support\Str::random(15);
$model = $attributes->wire('model')->value()
@endphp
...

<script wire:ignore>
   var model $id ;

   document.addEventListener("livewire:load", function(event) 
         model $id  = @this. $model ;
   );
</script>

然后，使用 livewire 挂钩，您必须监听 element.updated 事件，并将初始状态与 livewire 属性的新状态进行比较

我只使用条件比较，我看到你可以使用Proxy 来获得干净的代码：

<script wire:ignore>
  document.addEventListener("DOMContentLoaded", () => 

      Livewire.hook('element.updated', (el, component) => 
          if(model $id  && !@this. $model )
              new bootstrap.Modal(document.getElementById(' $id ')).hide();

          if(!model $id  && @this. $model )
              new bootstrap.Modal(document.getElementById(' $id ')).show();

          model $id  = @this. $model ;
      );
  );
</script>

我用它来打开一个引导模式刀片组件组件。