Day 26 |> Phoenix |> LiveView |> 简单的范例

这篇文章，要来做一个最简单的 LiveView 范例，简单了解一下他怎麽用，体会一下他的运作方式。

1. 首先，利用 mix phx.new live_view_project --live 指令，我们可以创建一个新专案，因为加了--live 参数，因此会建好 LiveView 预设的设定及路由。然後同一般专案一样，需在 dev.ex 中做好 ecto 的资料库设定，执行 mix ecto.create。

2. 在 router.ex 中，可以看到以下内容，他帮我们做好了一个有用 WebSocket 通道连线的页面，与一般的页面不同，如果需要用 LiveView 做 WebSocket 的连线，需使用 live 函式，这麽一来在使用 GET 方法做请求时，便会回传我们所需要的页面，并且会透过 LiveView 更新状态。

  scope "/", LiveViewProjectWeb do
    pipe_through :browser

    live "/", PageLive, :index
  end

3. 为了先大致看懂其中的运作流程。我们自己做一个 LiveView 的路由/test。

  scope "/", LiveViewProjectWeb do
    pipe_through :browser

    live "/", PageLive, :index
    live "/test", TestLive
  end

4. 新增一支TestLive的档案，里面必须实现模组函式mount，mount的功能是在页面请求後，建立socket连线通道时，初始化状态的函式，他接受三个参数，第一个是我们请求时带入的参数，第二个是session的资料内容，第三个就是socket的资料本身，在以下这个例子，他将 count 初始化为 10:
   lib/live_project_web/live/test_live.ex

defmodule LiveViewProjectWeb.TestLive do
  use LiveViewProjectWeb, :live_view

  def mount(_params, _session, socket) do
    socket = assign(socket, :count, 10)
    {:ok, socket}
  end
end

5. 新增test_live.html.leex，如下:

Count: <%= @count %>

如此一来，LiveView 便会将 count 的状态印在模板上，且当事件触发状态变更时，会即时更新。

6. 修改一下这两支档案，加上事件监听处理试试~
   test_live.ex

defmodule LiveViewProjectWeb.TestLive do
  use LiveViewProjectWeb, :live_view

  def mount(_params, _session, socket) do
    socket = assign(socket, :count, 10)
    {:ok, socket}
  end

  def handle_event("add", _, socket) do
    socket = update(socket, :count, &(&1+1))
    {:noreply, socket}
  end

  def handle_event("sub", _, socket) do
    socket = update(socket, :count, &(&1-1))
    {:noreply, socket}
  end
end

以及
test_live.html.leex

Count: <%= @count %>
<hr/>
<button phx-click="sub">-1</button>
<button phx-click="add">+1</button>

如此一来，便完成一个十分简陋的计数器罗!

过程中，我没有写到半行前端的程序码(不过前端还是有程序在帮我们处理的)，就可以对在後端的状态进行变更，而且是十分即时性、不需换页的。 在某些应用场景下，这种功能会比起前端框架更为方便，并且对SEO是十分友善的(因为一开始回传的依旧是一个完整的HTML页面)。