import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/functional-basic/Classes/Hash - Quản lý trạng thái URL Hash'/>

# Lớp Hash

Một lớp facade tĩnh để quản lý dữ liệu được lưu trữ trong URL hash (`#`). Nó ủy quyền thực thi cho lớp `HashInstance`, cung cấp khả năng truy cập tập trung и cách ly trạng thái (ví dụ: cho SSR).

Nó tự động đồng bộ hóa trạng thái ứng dụng với URL — mỗi lần gọi `set` sẽ cập nhật chuỗi hash trên trình duyệt, và sự kiện `hashchange` sẽ làm mới trạng thái nội bộ.

## Tính năng chính

- **Đồng bộ với URL** — Dữ liệu được lưu ở định dạng dễ đọc trong chuỗi hash.
- **Phản hồi qua Watcher** — Phương thức `addWatch` cho phép đăng ký theo dõi thay đổi của một biến cụ thể.
- **Tự động khởi tạo** — Khi tải trang, dữ liệu được tự động đọc từ URL.
- **Phân tích kiểu thông minh** — Giá trị được giải mã từ chuỗi: số, boolean và đối tượng được khôi phục về kiểu gốc.
- **Cách ly SSR** — `ServerStorage` đảm bảo mỗi yêu cầu trên máy chủ có một phiên bản dữ liệu riêng.

## Khởi tạo

Lớp này là tĩnh và khởi tạo tự động khi truy cập lần đầu.

```javascript
// URL: https://myapp.com/#page=2;filter=active

import { Hash } from '@dxtmisha/functional-basic'

const page = Hash.get('page')    // 2 (number)
const filter = Hash.get('filter') // 'active' (string)
```

## Phương thức

### Phiên bản
- `static getItem(): HashInstance` — Trả về phiên bản `HashInstance` hiện tại (được cách ly cho yêu cầu hiện tại).

### Đọc и Ghi
- `static get<T>(name: string, defaultValue?: T | (() => T)): T` — Trả về giá trị của biến hash.
- `static set<T>(name: string, callback: T | (() => T)): void` — Thiết lập giá trị của biến и cập nhật URL hash.

### Theo dõi (Watchers)
- `static addWatch<T>(name: string, callback: (value: T) => void): void` — Đăng ký theo dõi thay đổi của một biến hash cụ thể.
- `static removeWatch<T>(name: string, callback: (value: T) => void): void` — Hủy đăng ký theo dõi thay đổi của một biến.

### Quản lý
- `static reload(): void` — Ép buộc đồng bộ hóa trạng thái với URL hash hiện tại.

## Ví dụ

### Đọc và ghi
```javascript
import { Hash } from '@dxtmisha/functional-basic'

// Đọc với giá trị mặc định
const page = Hash.get<number>('page', 1)

// Ghi (URL thay đổi thành #page=3)
Hash.set('page', 3)

// Ghi qua hàm
Hash.set('page', () => page + 1)
```

### Đăng ký theo dõi thay đổi
```javascript
Hash.addWatch<string>('filter', (newFilter) => {
  console.log('Bộ lọc đã thay đổi thành:', newFilter)
})

// Hủy đăng ký (callback phải là tham chiếu đến cùng một hàm)
Hash.removeWatch('filter', callback)
```

### Quản lý trạng thái trang
```javascript
// Khởi tạo bộ lọc với giá trị mặc định
const filter = Hash.get('filter', 'all')
const sort = Hash.get('sort', 'date')

// Thay đổi khi người dùng thực hiện hành động
Hash.set('filter', 'active')
// URL: #filter=active;sort=date
```
