Phoenix

LiveView State & Assigns

Penjelasan

Semua data yang ditampilkan LiveView tersimpan sebagai assigns di dalam socket, diakses lewat assign/3 untuk menetapkan nilai baru atau update/3 untuk mengubah nilai berdasarkan nilai sebelumnya. Karena assigns bisa berisi struktur data besar, LiveView otomatis melakukan diff tracking sehingga hanya bagian template yang berubah yang dikirim ulang ke browser, bukan seluruh HTML. Untuk data yang mahal dihitung tapi jarang berubah, kita bisa memakai assign_new/3 yang hanya menghitung nilai jika belum ada di assigns, berguna saat berbagi data antara LiveView induk dan komponen anak. Penting juga memahami bahwa setiap proses LiveView adalah proses Elixir terpisah per koneksi user, jadi state tidak pernah tercampur antar user.

Contoh Konsep

defmodule TokoAppWeb.KeranjangLive do
  use TokoAppWeb, :live_view

  def mount(_params, _session, socket) do
    socket =
      socket
      |> assign(items: [])
      |> assign(total: 0)

    {:ok, socket}
  end

  def handle_event("tambah_item", %{"harga" => harga}, socket) do
    harga = String.to_integer(harga)

    socket =
      socket
      |> update(:items, &[harga | &1])
      |> update(:total, &(&1 + harga))

    {:noreply, socket}
  end
end

Praktikum

Tambahkan assign daftar_komentar (list kosong) dan event tambah_komentar yang menambahkan string komentar baru ke daftar tersebut.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Hindari menyimpan data yang sangat besar (misal ribuan baris) langsung di assigns karena akan membebani memori tiap proses LiveView, pertimbangkan paginasi.

← Kembali LiveView Dasar (mount/render/handle_event) Lanjutkan → LiveView Form & Validasi Real-Time