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

<Meta title='@dxtmisha/vi/functional/Composables/useRouterList - Quản lý danh sách liên kết'/>

# `useRouterList`

Quản lý danh sách liên kết cho router. Cho phép tạo menu điều hướng dựa trên danh sách dữ liệu, tự động xử lý trạng thái hoạt động và chuyển đổi.

**Tham số:**
- `list: RefType<ConstrBind<T>[] | undefined>` — danh sách các mục điều hướng. Mỗi mục phải chứa `value` và `label`.
- `selected?: Ref<string> | string` — mục được chọn ban đầu hoặc giá trị của nó. Nếu không được chỉ định, mục đầu tiên trong danh sách sẽ được chọn.
- `hasTo?: boolean` — tự động thêm thuộc tính `to` vào các mục danh sách để điều hướng (mặc định là `false`).

**Trả về:**
Một đối tượng với các thuộc tính phản ứng và phương thức điều khiển:
- `item: ComputedRef<T | undefined>` — Thuộc tính được tính toán trả về đối tượng mục hiện đang hoạt động dựa trên `selected`.
- `selected: Ref<string>` — Tham chiếu phản ứng (`ref`) đến giá trị của mục được chọn. Cho phép cả lấy và thiết lập lựa chọn hiện tại.
- `label: ComputedRef<NumberOrString>` — Thuộc tính được tính toán trả về nhãn (`label`) của mục hiện được chọn.
- `list: ComputedRef<ConstrBind<T>[]>` — Danh sách các mục được tính toán. Nếu `hasTo` là `true`, mỗi mục được tự động bổ sung thuộc tính `to` để tích hợp điều hướng.
- `to(name?: string): void` — Phương thức điều hướng lập trình đến một mục theo tên (`value`) của nó. Cập nhật `selected` và thực hiện `router.push`.
- `toMain(): void` — Phương thức điều hướng nhanh đến mục đầu tiên ("mục chính") trong danh sách `list`.

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

const menuItems = ref([
  { value: 'dashboard', label: 'Bảng điều khiển' },
  { value: 'settings', label: 'Cài đặt' }
])

// Khởi tạo với 'dashboard' được chọn và tự động tạo thuộc tính 'to'
const { list, selected, to } = useRouterList(menuItems, 'dashboard', true)

// Danh sách sẽ chứa các đối tượng có trường 'to', ví dụ:
// { value: 'dashboard', label: 'Bảng điều khiển', to: { name: 'dashboard' } }

// Điều hướng bằng lập trình
to('settings')
```