在掛載期間使用 LiveView 將值從客戶端傳遞到 Phoenix 服務器

Question

我正在嘗試將值從瀏覽器（例如，localstorage）傳遞到服務器，並在安裝實時模板 (leex) 並創建 UI 視圖時使其可用。 僅嘗試以下操作以獲得如下所示的消息。

<JS>
let liveSocket = new LiveSocket("/live", Socket, {params: {init_state: "value from localstorage"}..

<Phoenix>
def mount(params, _session, socket) do
  IO.inspect(params)  # this returns "not route mounted"

Answer 1

get_connect_params/1似乎是根據這個問題頁面（這樣做的方式https://github.com/phoenixframework/phoenix_live_view/issues/204 ）。 此外它的socket參數，不params尋找下變量。

<JS>
let liveSocket = new LiveSocket("/live", Socket, {params: {init_state: "value from localstorage"}..

<Phoenix>
def mount(_params, _session, socket) do
  IO.inspect(get_connect_params(socket)["init_state"])  

Answer 2

def mount(params, _session, socket) do

在 LiveView 中，當您從路由器安裝 LiveView 時，您嘗試訪問的第一個名為 params 的參數用於查詢參數以及任何路由器路徑參數，這不是您的情況，因為您是從模板調用它。 這就是你得到錯誤的原因。

要獲取您在let liveSocket = new LiveSocket("/live", Socket, {params: {init_state: "value from localstorage"}..您需要調用get_connect_params/1線

def mount(_params, _session, socket) do
  init_state = get_connect_params(socket)["init_state"]

  IO.inspect(init_state)
end

需要注意的重要一點是get_connected\\1只能在 mount 函數內部使用。

Answer 3

另一種解決方案是使用hooks ，它允許您在掛載（或其他事件）上調用任意 JS（例如從 localStorage 讀取），然后向 LiveView 發送消息。

模板中的某處：

<div phx-hook="LoadIt"></div>

修改 app.js：

let Hooks = {}
Hooks.LoadIt = {
  mounted() {
    this.pushEvent("foobar", {
      baz: localStorage.getItem("baz"),
    })
  },
}

let liveSocket = new LiveSocket("/live", Socket, {
  params: {_csrf_token: csrfToken},
  hooks: Hooks,
})

在您的 LiveView 中：

def handle_event("foobar", %{"baz" => baz}, socket) do
  # Do whatever with baz.
  {:noreply, socket}
end

更多示例代碼在這里： https : //thepugautomatic.com/2020/05/persistent-session-data-via-localstorage-in-phoenix-liveview/

對於這個特定用例，顯然比其他一些解決方案需要更多的工作，但是如果您還想根據 LiveView 中發生的情況更新 localStorage，這可能是一個不錯的選擇。