如何在Phoenix LiveView的handle_event中多次更新状态触发重渲染？

核心思路是把耗时任务放到异步进程中执行，避免阻塞LiveView进程，这样就能先推送「显示加载状态」的更新，等任务完成后再推送「恢复按钮显示」的更新。

步骤1：修改handle_event，异步执行耗时任务 #

更新你的handle_event函数，先设置working: true并返回更新后的socket，同时启动一个异步任务执行耗时操作，任务完成后给当前LiveView进程发送消息：

def handle_event("button_clicked", %{"button" => which_button}, socket) do
  # 先推送working: true的状态更新，显示spinner
  socket = assign(socket, :working, true)
  
  # 启动异步任务，执行耗时操作
  Task.start_link(fn ->
    # 执行你的耗时任务
    BigLongTask.run(which_button)
    # 任务完成后给当前LiveView进程发送消息
    send(self(), {:task_finished, which_button})
  end)
  
  {:noreply, socket}
end

步骤2：添加handle_info处理任务完成消息 #

在LiveView中新增handle_info回调，接收任务完成的消息，把working设回false：

def handle_info({:task_finished, _which_button}, socket) do
  # 推送working: false的状态更新，恢复按钮显示
  socket = assign(socket, :working, false)
  {:noreply, socket}
end

# 可选：处理任务执行失败的情况，避免进程崩溃
def handle_info({:DOWN, _ref, :process, _pid, reason}, socket) do
  IO.puts("任务执行失败：#{inspect(reason)}")
  socket = assign(socket, :working, false)
  {:noreply, socket}
end

方案说明 #

• LiveView的handle_event是同步执行的，但我们把耗时任务放到了独立的Task进程中，所以handle_event能快速完成并推送第一个状态更新（显示spinner）。
• 当异步任务完成后，通过send(self(), ...)给LiveView进程发消息，LiveView在handle_info中处理消息，推送第二个状态更新（恢复按钮）。
• 不需要封装额外组件，也不受限于phx-click-loading的作用范围，完全通过LiveView的状态控制实现需求。

如果你的耗时任务可能抛出异常，建议在Task里加上异常捕获，或者通过Task.Supervisor来管理任务，确保LiveView进程不会因为任务崩溃而受影响。

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