Alpine.js Store – Hướng dẫn dùng Alpine.store() và $store

Giới thiệu về Alpine.js Store

Alpine.js là một framework JavaScript nhẹ giúp bạn xây dựng giao diện tương tác trực tiếp trong HTML. Một trong những tính năng mạnh mẽ nhất của nó là Alpine.store() – cơ chế quản lý trạng thái toàn cục (global state) cho phép chia sẻ dữ liệu giữa các component mà không cần thư viện phức tạp như Vuex hay Redux.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách sử dụng Alpine.store() và biến $store để quản lý dữ liệu xuyên suốt ứng dụng.

Khởi tạo một Store

Để tạo một store, bạn sử dụng phương thức Alpine.store() với hai tham số: tên store và object chứa dữ liệu.

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.store('user', {
      name: 'Nguyễn Văn A',
      email: '[email protected]',
      loggedIn: true,
      
      get fullName() {
        return `${this.name} - ${this.email}`;
      },
      
      logout() {
        this.loggedIn = false;
        this.name = '';
        this.email = '';
      }
    });
  });
</script>

Truy cập Store trong HTML với $store

Sau khi khởi tạo, bạn có thể truy cập store từ bất kỳ component Alpine.js nào thông qua biến $store:

<div x-data>
  <p x-show="$store.user.loggedIn">
    Xin chào, <strong x-text="$store.user.name"></strong>
  </p>
  <p x-show="!$store.user.loggedIn">
    Vui lòng <a href="/login">đăng nhập</a>
  </p>
  <button @click="$store.user.logout()">
    Đăng xuất
  </button>
</div>

Store phức tạp với nhiều dữ liệu

Bạn có thể tạo nhiều store khác nhau để quản lý các phần riêng biệt của ứng dụng:

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.store('cart', {
      items: [],
      total: 0,
      
      addItem(product) {
        this.items.push(product);
        this.calculateTotal();
      },
      
      removeItem(index) {
        this.items.splice(index, 1);
        this.calculateTotal();
      },
      
      calculateTotal() {
        this.total = this.items.reduce(
          (sum, item) => sum + item.price * item.qty, 0
        );
      },
      
      get count() {
        return this.items.length;
      }
    });
    
    Alpine.store('theme', {
      darkMode: false,
      toggle() {
        this.darkMode = !this.darkMode;
      }
    });
  });
</script>

<div x-data>
  <span x-text="$store.cart.count">0</span> sản phẩm
  <span x-text="$store.cart.total.toLocaleString('vi-VN')">0</span>₫
  <button @click="$store.theme.toggle()">
    Chế độ: <span x-text="$store.theme.darkMode ? 'Tối' : 'Sáng'"></span>
  </button>
</div>

Kết luận

Alpine.store() là công cụ cực kỳ hữu ích cho các dự án Alpine.js, giúp bạn quản lý trạng thái toàn cục mà không cần cài đặt thêm thư viện nào. Với cú pháp đơn giản, dễ hiểu, bạn có thể nhanh chóng xây dựng các ứng dụng web tương tác phức tạp với ít code hơn. Hãy thử áp dụng vào dự án tiếp theo của bạn!