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

<Meta title='@dxtmisha/vi/functional/# Khởi tạo Plugin'/>

# Khởi Tạo Plugin Thống Nhất (dxtFunctionalPlugin)

`dxtFunctionalPlugin` là một plugin cho Vue 3 dùng để đảm nhiệm mọi thao tác cấu hình tập trung và khởi chạy hàng loạt các dịch vụ cốt lõi (`Api`, `Translate`, `Icons`, `Meta`) bên trong ứng dụng của bạn.

Thay vì phải nhập thủ công từng dịch vụ và cấu hình chúng riêng biệt, bạn chỉ việc gởi một đối tượng cấu hình duy nhất ngay thời điểm ứng dụng khởi động.

## Khởi Động Nhanh (Cài Đặt)

Trong tệp thông số tĩnh ứng dụng chính của bạn (`main.ts`), hãy gọi phương thức `app.use()`, đưa vào plugin và các lựa chọn cấu hình của bạn. **Lưu ý phải thực thi việc này trước lúc gắn ứng dụng (`app.mount`).**

```typescript
// src/main.ts
import { createApp } from 'vue'
import { dxtFunctionalPlugin, type FunctionalPluginOptions } from '@dxtmisha/functional'
import App from './App.vue'
import router from './router'

const app = createApp(App)

// Chuẩn bị cấu hình
const functionalOptions: FunctionalPluginOptions = {
  // Cấu hình máy khách API (Base URL)
  api: { urlRoot: 'https://api.example.com' },
  // Hậu tố được thêm vào sau bất cứ thẻ <title> nào của trang web
  metaSuffix: ' | Ứng Dụng Của Tôi',
  // Truyền đối tượng router để các dịch vụ nhận biết hệ thống điều hướng
  router,
  // Các nguyên nhân lỗi cho trung tâm lỗi
  errorCauses: [
    { code: 'access_denied', message: 'Truy cập bị từ chối' }
  ],
  // Các trình xử lý lỗi
  errorHandlers: [
    {
      group: 'auth',
      handlers: [
        (cause) => console.error('Lỗi xác thực:', cause.message)
      ]
    }
  ]
}

// Bật plugin chức năng
app.use(dxtFunctionalPlugin, functionalOptions)

app.mount('#app')
```

## Plugin Này Thực Trực Hoạt Động Gì?

Lúc bạn kích hoạt `app.use(dxtFunctionalPlugin)`, các giải đoạn tuần tự sau sẽ tự động diễn ra:

1. **Khởi Chạy `Api`**: Thiết lập Base URL, headers mặc định, và các bước logic kiểm duyệt giao thức (hook) qua phương thức `Api.setConfig()`.
2. **Khởi Chạy `Translate`**: Áp dụng các cấu hình về ngôn ngữ / dữ liệu từ địa phương để nạp biểu mẫu dịch thuật.
3. **Khởi Chạy `Icons`**: Kết nối và điều hướng kho lưu trữ các tập SVG hình tượng biểu trưng toàn cục.
4. **Khởi Chạy `Meta`**: Khởi thiết lập hậu tố trực tiếp trên tab trình duyệt (sử dụng hàm `useMeta().setSuffix()`) nếu trường này được kê khai.
5. **Cộng Giao Động Vue Router**: Nạp đối tượng định tuyến này vào mạng lưới dữ liệu riêng của bộ thư viện (`RouterItemRef`), biến các chức năng điều khiển trở thành có thể dùng chung mở cho những dịch vụ khác dẫu là nằm tách khỏi phạm vi một component Vue.
6. **Thiết lập `ErrorCenter`**: Cấu hình danh sách các nguyên nhân lỗi định trước (`ErrorCenter.addList`) và đăng ký các hàm xử lý lỗi toàn cục (`ErrorCenter.addHandlerList`) vào kho lưu trữ lỗi tập trung.
7. **Bật `executeUseGlobalInit()` chạy thi hành**: Đánh thức một lần tự khởi điểm duy nhất hoàn toàn những global singletons đứng ở nền móng `executeUseGlobal`. Chấm dứt thao tác bạn cất công truy xuất thủ công.

## Tinh Chỉnh Dịch Vụ Mở Rộng

Trên `FunctionalPluginOptions`, bạn chỉ việc điền những tiện ích nào mình nhất thiết sử dụng tới. Cho ví dụ, nếu hệ dự án của bạn tuyệt nhiên không cần hệ thống thay ngôn ngữ (`Translate`), bạn hoàn toàn bình thản bỏ trống không gởi dữ liệu phím khóa đó cho tiện ích thiết lập.

### Ví Dụ Chỉnh Cơ Sở Dữ Liệu API Lương Cao Mức Chuyên Sâu:

```typescript
const options: FunctionalPluginOptions = {
  api: {
    urlRoot: 'https://api.my-crm.com',
    headers: {
      'Content-Type': 'application/json'
    },
    // Hook móc chạy TRƯỚC ngay trước đà gởi bất cứ cuộc trao đổi fetch API nào 
    preparation: async (fetchObj) => {
      fetchObj.request.headers['Authorization'] = `Bearer ${myToken}`
    },
    // Hook móc bủa gọi SAU LUÔN bất cứ yêu cầu nào kết tụ (Xử lý lỗi toàn cục)
    end: async (response, fetchObj) => {
      if (response.status === 401) {
        // Rút phép người dùng
      }
      return undefined
    }
  }
}
```
