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

<Meta title='@dxtmisha/vi/functional/# Hook phản hồi (Composables)'/>

# Hook phản hồi (Composables)

Một tập hợp các công cụ để làm việc với các API trình duyệt, lưu trữ và quốc tế hóa theo phong cách phản hồi của **Vue 3 (Composition API)**.

## Đặc điểm

Ý tưởng cốt lõi của các hook này là cung cấp một giao diện đơn giản và đáng tin cậy để làm việc với dữ liệu và trạng thái bên ngoài. Chúng tự động đồng bộ hóa các giá trị với kho lưu trữ, theo dõi các thay đổi trong các tab khác và đảm bảo cập nhật giao diện người dùng tức thì khi các cài đặt toàn cầu (như ngôn ngữ hoặc đơn vị tiền tệ) thay đổi.

## Các hook hiện có

### Lưu trữ dữ liệu
- `useStorageRef` — Lớp vỏ phản hồi cho `localStorage`. Hỗ trợ thời gian tồn tại (cache) và đồng bộ hóa giữa các tab.
- `useSessionRef` — Để làm việc với `sessionStorage`.
- `useCookieRef` — Quản lý cookie phản hồi.

### Quốc tế hóa (I18n)
- `useTranslateRef` — Truy xuất phản hồi các chuỗi bản dịch. Tự động cập nhật khi ngôn ngữ được thay đổi trong `GeoRef`.
- `useGeoIntlRef` — Định dạng số, tiền tệ và ngày tháng dựa trên ngôn ngữ hiện tại.

### Xử lý dữ liệu và tìm kiếm
- `useSearchRef` — Tìm kiếm phía máy khách cho các mảng dữ liệu với hỗ trợ lọc nhiều cột.
- `useFormattersRef` — Định dạng hàng loạt danh sách đối tượng dựa trên các quy tắc được xác định trước.

### API trình duyệt và Trạng thái
- `useBroadcastValueRef` — Truyền và đồng bộ hóa dữ liệu giữa các cửa sổ/tab thông qua `BroadcastChannel`.
- `useHashRef` — Quản lý phản hồi mã băm URL (`window.location.hash`).
- `useLoadingRef` — Quản lý dễ dàng các trạng thái tải (cục bộ và toàn cầu).

## Cách làm việc với chúng

Các hook được thiết kế để giảm thiểu mã mẫu. Ví dụ: khi làm việc với bộ lưu trữ cục bộ, bạn không cần gọi `getItem` và `setItem` một cách thủ công. Chỉ cần tạo một biến và mọi thay đổi đối với biến đó sẽ tự động được lưu vào `localStorage`.

```typescript
import { useStorageRef } from '@dxtmisha/functional'

// Giá trị 'theme' sẽ được tự động lưu và tải
const theme = useStorageRef('theme', 'light')

const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
```

Đối với quốc tế hóa, một sự kết hợp giữa các lớp quản lý và các hook được sử dụng. Nếu bạn thay đổi ngôn ngữ thông qua `GeoRef.set()`, tất cả các biến được tạo qua `useTranslateRef` sẽ ngay lập tức cập nhật giá trị của chúng trên toàn bộ ứng dụng mà không cần tải lại trang.

```typescript
import { useTranslateRef, useGeoIntlRef } from '@dxtmisha/functional'

const title = useTranslateRef('main.title')
const intl = useGeoIntlRef()

// Giá đã định dạng sẽ tự cập nhật khi tiền tệ hoặc ngôn ngữ thay đổi
const priceDisplay = intl.currency(12500, 'RUB')
```

Các hook tìm kiếm và định dạng (`useSearchRef`, `useFormattersRef`) thường được sử dụng như các khối xây dựng cho các công cụ phức tạp hơn như `useApiManagementRef`, nhưng chúng cũng có thể được sử dụng độc lập để xử lý các mảng dữ liệu cục bộ.

```typescript
import { ref } from 'vue'
import { useSearchRef } from '@dxtmisha/functional'

const items = ref([{ name: 'Táo' }, { name: 'Chuối' }])
const search = ref('')

const { listSearch } = useSearchRef(items, ['name'], search)
// listSearch sẽ luôn chỉ chứa các mục đã được lọc
```

Cách tiếp cận này cho phép bạn xây dựng giao diện một cách khai báo: bạn mô tả dữ liệu nào bạn cần và cách chúng được liên kết, và các hook sẽ đảm nhận tất cả công việc đồng bộ hóa và cập nhật.
