@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/functional/functional/functions/executeUse/executeUse.ru.mdx

@@ -0,0 +1,272 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Functions/executeUse - Синглтон с управлением жизненным циклом'/>
+
+# `executeUse`
+
+`executeUse` — это фабрика, которая оборачивает любую функцию-инициализатор и превращает её результат в **управляемый синглтон**. Объект создаётся ровно один раз, замораживается (`Object.freeze`) и переиспользуется при каждом последующем вызове. В зависимости от выбранного типа синглтон может быть компонентным, глобальным или локальным.
+
+Для обеспечения уникальности идентификаторов используется сочетание внутреннего глобального кода и функции `getElementId()`, что гарантирует отсутствие коллизий даже при множественном использовании в разных модулях.
+
+
+
+### Ограничения дженериков (Generic Constraints)
+
+- `R` — тип объекта, возвращаемого функцией-инициализатором (`callback`).
+- `O extends any[]` — типы аргументов, которые принимает `callback`.
+- `RI extends ExecuteUseReturn<R>` — результирующий тип синглтона, включающий методы управления.
+
+```typescript
+function executeUse<R, O extends any[], RI extends ExecuteUseReturn<R>>(
+  callback: (...args: O) => R,
+  type: ExecuteUseType = ExecuteUseType.provide
+): (...args: O) => RI
+
+function executeUseGlobal<R>(callback: () => R): () => ExecuteUseReturn<R>
+function executeUseProvide<R, O extends any[]>(callback: (...args: O) => R): (...args: O) => ExecuteUseReturn<R>
+function executeUseLocal<R, O extends any[]>(callback: (...args: O) => R): (...args: O) => ExecuteUseReturn<R>
+```
+
+**Параметры:**
+- `callback: (...args: O) => R` — Функция-инициализатор. Вызывается при первом обращении и возвращает объект, который будет заморожен и закеширован. Аргументы передаются только при первом вызове.
+- `type: ExecuteUseType` — Тип синглтона (по умолчанию `ExecuteUseType.provide`).
+
+**Возвращает:** `ExecuteUseReturn<R>` — замороженный объект, расширяющий `R` следующими методами:
+- `init(): Readonly<R>` — возвращает исходный результат `callback` без методов управления (`init`, `destroyExecute`).
+- `destroyExecute?(): void` — только у `local` и `global`. Сбрасывает кеш, позволяя пересоздать объект при следующем вызове.
+
+### Функция-инициализатор (`callback`) и её аргументы (`...args: O`)
+
+Главная особенность `executeUse` заключается в том, что фабричная функция (`callback`) и переданные в неё аргументы (`...args`) используются **только один раз** — во время фактической инициализации (самого первого вызова).
+
+- **`callback`**: Это фабрика, описывающая логику создания состояния. Внутри неё обычно объявляются реактивные переменные (`ref`, `reactive`), функции для их изменения и вычисляемые значения (`computed`). Возвращаемый из `callback` объект будет "заморожен" и закеширован.
+- **`...args: O`**: Вы можете передавать любые аргументы в ваш инициализатор (например, начальное состояние, ID загружаемой сущности или API-клиент). Эти аргументы будут прокинуты внутрь `callback`. 
+
+> **Важно об аргументах:** Так как `executeUse` жестко кеширует результат первого вызова, любые аргументы, переданные при **последующих** вызовах этого же хука в других компонентах, **будут полностью проигнорированы**. Объект не будет пересоздан, и функция `callback` не выполнится повторно с новыми аргументами (если только вы предварительно не сбросили кеш через `destroyExecute()`).
+
+### Метод-заглушка `init()`
+
+Метод `init` — это просто пустая функция-заглушка, которая возвращает тот же самый замороженный объект состояния. Она нужна **исключительно для удобства чтения кода (Developer Experience)**. 
+
+Её главная цель — дать возможность разработчику явно и визуально выделить в коде то самое место, где происходит фактическая (первая) инициализация синглтона. С технической точки зрения `const state = useTheme()` и `const state = useTheme().init()` делают абсолютно одно и то же.
+
+```typescript
+// Где-то глубоко в дереве компонентов мы просто получаем готовый стейт
+const theme = useTheme()
+
+// А здесь, в корневом компоненте (или main.ts), 
+// мы явно показываем другим разработчикам: "Инициализация происходит именно ТУТ"
+const theme = useTheme().init()
+```
+## Пошаговая инструкция: Как создать и использовать свой сервис
+
+Создание управляемого синглтона с помощью `executeUse` обычно состоит из трёх простых шагов.
+
+### Шаг 1: Определение состояния (Фабрика)
+Сначала решите, какой тип стейта вам нужен (`global`, `local` или `provide`). Создайте отдельный файл (например, `useMyService.ts`). Используйте одну из функций-фабрик (например, `executeUseGlobal`).
+
+Внутри функции-колбека опишите все ваши реактивные переменные (`ref`, `reactive`), вычисляемые свойства (`computed`) и функции для изменения состояния:
+
+```typescript
+// src/composables/useMyService.ts
+import { ref, computed } from 'vue'
+import { executeUseGlobal } from '@dxtmisha/functional'
+
+// Создаем синглтон и инкапсулируем логику
+const instance = executeUseGlobal(() => {
+  // 1. Реактивное состояние
+  const count = ref(0)
+  
+  // 2. Вычисляемые свойства
+  const isPositive = computed(() => count.value > 0)
+  
+  // 3. Методы управления
+  const increment = () => count.value++
+  const reset = () => { count.value = 0 }
+
+  // Возвращаем то, что должно быть доступно снаружи
+  return {
+    count,
+    isPositive,
+    increment,
+    reset
+  }
+})
+
+// Экспортируем функцию-обертку.
+// Конструкция () => instance() нужна для того, чтобы редакторы кода (IDE)
+// корректно распознавали useMyService именно как функцию-composable.
+// Это обеспечивает корректную работу автокомплита и вывода типов.
+export const useMyService = () => instance()
+```
+
+### Шаг 2: Инициализация (Только для global)
+Если вы выбрали режим `global` (как в примере выше), вам необходимо указать приложению, когда именно создать этот экземпляр. Обычно это делается однократно в точке входа (`main.ts`):
+
+```typescript
+// src/main.ts
+import { createApp } from 'vue'
+import { executeUseGlobalInit } from '@dxtmisha/functional'
+import App from './App.vue'
+
+// Инициализируем абсолютно все global-синглтоны разом
+executeUseGlobalInit() 
+
+createApp(App).mount('#app')
+```
+
+> **Примечание:** Если в вашем приложении подключен плагин `dxtFunctionalPlugin`, вызывать `executeUseGlobalInit()` вручную при старте приложения **не нужно** — плагин делает это автоматически под капотом.
+
+### Шаг 3: Использование в компоненте
+Теперь вы можете импортировать вашу функцию `useMyService` в любой Vue-компонент. При самом первом логическом вызове для наглядности используйте метод `init()`.
+
+```vue
+<!-- src/components/MyComponent.vue -->
+<script setup lang="ts">
+import { useMyService } from '@/composables/useMyService'
+
+// Получаем стейт напрямую. Метод init() подсказывает, 
+// что здесь происходит первичное обращение в рамках этого компонента.
+const { count, isPositive, increment } = useMyService().init()
+</script>
+
+<template>
+  <div>
+    <p>Текущий счетчик: {{ count }}</p>
+    <p>Больше нуля? {{ isPositive ? 'Да' : 'Нет' }}</p>
+    <button @click="increment">Увеличить</button>
+  </div>
+</template>
+```
+
+Если по какой-то причине вам нужно принудительно сбросить стейт (например, при выходе пользователя из аккаунта), вызовите встроенный метод сброса:
+```typescript
+const service = useMyService()
+if (service.destroyExecute) {
+  service.destroyExecute()
+}
+```
+
+## Тип `ExecuteUseType`
+
+### `provide` (компонентный синглтон, по умолчанию)
+
+Это компонентно-ориентированный синглтон, который жестко привязан к жизненному циклу компонента Vue и всего его поддерева. Он использует под капотом встроенный в Vue механизм реактивности и передачи контекста (provide/inject), позволяя безопасно прокидывать один и тот же экземпляр состояния глубоко вниз по дереву без необходимости передавать его через props.
+
+**Когда использовать:** 
+- Для совместного использования состояния между строго определенной веткой компонентов (родитель -> много уровней вложенности -> дочерний), без засорения глобального хранилища.
+- Когда на одной странице нужно вывести несколько независимых блоков (например, несколько сложных виджетов загрузки файлов), у каждого из которых должно быть своё уникальное состояние, разделяемое только внутри этого виджета.
+- Если нужно автоматическое удаление данных из памяти (garbage collection) при размонтировании "компонента-владельца".
+
+**Как работает:**
+Компонент, который первым вызывает эту функцию, автоматически становится «владельцем» (owner). Функция выполняет генерацию объекта и сразу же делает `provide(id, instance)`. Все вложенные компоненты при вызове этой же функции внутри себя не создают новый объект, а получают ранее созданный через `inject(id)`. 
+> Примечание: У этого типа отсутствует метод `destroyExecute()`, так как память освобождается автоматически системой реактивности Vue при уничтожении компонента-владельца.
+
+```typescript
+import { executeUseProvide } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+const useTheme = executeUseProvide(() => {
+  const mode = ref<'light' | 'dark'>('light')
+  const toggle = () => { mode.value = mode.value === 'light' ? 'dark' : 'light' }
+  return { mode, toggle }
+})
+
+// В родительском компоненте (владелец) — объект создаётся и публикуется (provide):
+const theme = useTheme()
+theme.toggle()
+
+// В глубоко вложенном дочернем компоненте — получает тот же объект (inject):
+const theme = useTheme()
+
+// В совершенно другом, независимом дереве компонентов — создастся НОВЫЙ независимый экземпляр:
+const theme2 = useTheme()
+```
+
+### `global` (глобальный синглтон приложения)
+
+Это классический архитектурный паттерн Singleton, существующий в строго единственном экземпляре на протяжении всего времени работы вашего приложения (с момента инициализации до закрытия вкладки браузера). Он обеспечивает глобальную точку доступа к состоянию из любого места в коде.
+
+**Когда использовать:**
+- Для хранения глобального стейта приложения: авторизации, профиля текущего пользователя, языковых настроек, глобальной корзины товаров.
+- Когда доступ к одним и тем же данным требуется из совершенно разных, не связанных между собой частей приложения (или даже вне компонентов Vue, например, в роутере).
+- Как легковесная замена Vuex / Pinia для простых задач.
+
+**Как работает:**
+Функция инициализации **не выполняется при вызове**. Вместо этого она добавляется в специальную внутреннюю очередь (`globalMethods`). Полная инициализация всех глобальных объектов происходит только при явном вызове `executeUseGlobalInit()`, который обычно размещается в `main.ts` до того, как приложение будет смонтировано. В дальнейшем все компоненты получают один и тот же закешированный объект из памяти.
+
+```typescript
+import { executeUseGlobal, executeUseGlobalInit } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+const useAuth = executeUseGlobal(() => {
+  const user = ref<string | null>(null)
+  const login = (name: string) => { user.value = name }
+  const logout = () => { user.value = null }
+  return { user, login, logout }
+})
+
+// В main.ts — строго ДО монтирования приложения (app.mount()):
+executeUseGlobalInit()
+
+// В любом компоненте, утилите или роутере:
+const auth = useAuth()
+auth.login('Alice')
+
+// Если нужно принудительно сбросить состояние (пересоздать стейт заново):
+auth.destroyExecute?.() 
+```
+
+### `local` (локальный синглтон в замыкании)
+
+Это независимый синглтон, который опирается на механизм лексических замыканий (closure caching) в JavaScript. Вместо использования контекста Vue или глобального скоупа, он сохраняет однажды сгенерированный результат прямо внутри своей собственной функции в памяти, мгновенно отдавая его при всех последующих вызовах.
+
+**Когда использовать:**
+- Для утилит, фабрик или сервисов, которые не привязаны к Vue (`provide`/`inject` не работают вне setup-функции компонента).
+- Когда вам нужен изолированный инстанс тяжелого класса или сервиса только тогда, когда он реально понадобится (ленивая инициализация по первому требованию), а не при старте всего приложения.
+- Для кэширования результатов сложных математических вычислений или преобразований конфигураций.
+
+**Как работает:**
+Не использует механизмы Vue. При самом первом вызове выполняется функция-инициализатор с переданными аргументами. Полученный результат жестко замораживается (`Object.freeze`) и сохраняется в переменной внутри замыкания `executeUse`. При всех последующих вызовах (даже если вы передадите другие аргументы) функция просто мгновенно возвращает уже сохраненный объект из переменной. 
+Метод `destroyExecute()` позволяет занулить эту внутреннюю переменную, чтобы при следующем вызове алгоритм инициализации отработал заново.
+
+```typescript
+import { executeUseLocal } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+const useHeavyConfig = executeUseLocal((env: string) => {
+  // Тяжелая операция вычисления конфигурации...
+  const config = ref({ api: `https://${env}.example.com` })
+  return { config }
+})
+
+// Первый вызов — инициализация
+const devConfig = useHeavyConfig('dev')
+console.log(devConfig.config.value.api) // https://dev.example.com
+
+// Второй вызов в другом файле — вернет тот же объект, аргумент игнорируется!
+const sameConfig = useHeavyConfig('prod') 
+console.log(sameConfig.config.value.api) // Всё еще https://dev.example.com
+
+// Принудительная очистка кэша
+sameConfig.destroyExecute?.()
+const newConfig = useHeavyConfig('prod') // Инициализация запустится заново
+```
+
+## `executeUseGlobalInit`
+
+```typescript
+function executeUseGlobalInit(): void
+```
+
+Вызывает все зарегистрированные глобальные инициализаторы (`ExecuteUseType.global`) и очищает очередь. Повторный вызов не пересоздаёт уже инициализированные синглтоны. Должна быть вызвана **один раз** при старте приложения — до монтирования корневого компонента.
+
+```typescript
+import { createApp } from 'vue'
+import { executeUseGlobalInit } from '@dxtmisha/functional'
+import App from './App.vue'
+
+executeUseGlobalInit()
+createApp(App).mount('#app')
+```
+

package/src/media/functional/functional/functions/executeUse/executeUse.vi.mdx

@@ -0,0 +1,267 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Functions/executeUse - Singleton với quản lý vòng đời'/>
+
+# `executeUse`
+
+`executeUse` là một factory bao bọc bất kỳ hàm khởi tạo nào và biến kết quả của nó thành một **singleton được quản lý**. Đối tượng được tạo đúng một lần, đóng băng (`Object.freeze`) và tái sử dụng trong mỗi lần gọi tiếp theo. Tùy theo loại được chọn, singleton có thể là phạm vi component, toàn cục, hoặc cục bộ.
+
+Để đảm bảo định danh duy nhất, thư viện kết hợp mã code toàn cục nội bộ và hàm `getElementId()`, giúp ngăn chặn hoàn toàn việc trùng lặp ID ngay cả khi sử dụng trong nhiều module khác nhau.
+
+
+
+### Giới hạn Generics (Generic Constraints)
+
+- `R` — kiểu đối tượng được trả về bởi hàm khởi tạo (`callback`).
+- `O extends any[]` — kiểu của các tham số đầu vào cho `callback`.
+- `RI extends ExecuteUseReturn<R>` — kiểu kết quả của singleton, bao gồm các phương thức quản lý.
+
+```typescript
+function executeUse<R, O extends any[], RI extends ExecuteUseReturn<R>>(
+  callback: (...args: O) => R,
+  type: ExecuteUseType = ExecuteUseType.provide
+): (...args: O) => RI
+
+function executeUseGlobal<R>(callback: () => R): () => ExecuteUseReturn<R>
+function executeUseProvide<R, O extends any[]>(callback: (...args: O) => R): (...args: O) => ExecuteUseReturn<R>
+function executeUseLocal<R, O extends any[]>(callback: (...args: O) => R): (...args: O) => ExecuteUseReturn<R>
+```
+
+**Tham số:**
+- `callback: (...args: O) => R` — Hàm khởi tạo. Được gọi khi truy cập lần đầu và trả về đối tượng sẽ được đóng băng và cache. Tham số chỉ được truyền vào ở lần gọi đầu tiên.
+- `type: ExecuteUseType` — Loại singleton (mặc định: `ExecuteUseType.provide`).
+
+**Trả về:** `ExecuteUseReturn<R>` — đối tượng đóng băng mở rộng `R` với các phương thức:
+- `init(): Readonly<R>` — trả về kết quả gốc của `callback` mà không có các phương thức quản lý (`init`, `destroyExecute`).
+- `destroyExecute?(): void` — chỉ có ở `local` và `global`. Đặt lại cache, cho phép tạo lại đối tượng ở lần gọi tiếp theo.
+
+### Hàm Khởi Tạo (`callback`) và Tham Số Đầu Vào (`...args: O`)
+
+Đặc điểm chính của `executeUse` là hàm factory (`callback`) và các tham số được truyền vào nó (`...args`) chỉ được sử dụng **đúng một lần** — trong quá trình khởi tạo thực tế (ngay ở lần gọi đầu tiên).
+
+- **`callback`**: Đây là một factory mô tả logic tạo lập trạng thái. Bên trong đó, bạn thường khai báo các biến phản ứng (`ref`, `reactive`), các hàm để thay đổi chúng, và các giá trị tính toán (`computed`). Đối tượng trả về từ `callback` sẽ đóng băng và được đưa vào cache.
+- **`...args: O`**: Bạn có thể truyền bất kỳ tham số nào vào hàm khởi tạo của mình (ví dụ: trạng thái ban đầu, ID của thực thể đang tải hoặc API client). Các tham số này sẽ được chuyển trực tiếp vào bên trong `callback`.
+
+> **Lưu ý quan trọng về tham số:** Vì `executeUse` ghi nhớ rất chặt (cache) kết quả của lần gọi đầu tiên, mọi tham số được truyền vào ở các lần gọi **tiếp theo** của cùng hook đó ở những component khác **sẽ bị bỏ qua hoàn toàn**. Đối tượng sẽ không được tạo lại và hàm `callback` cũng không chạy lại với tham số mới (trừ phi bạn đã chủ động đặt lại cache trước đó thông qua `destroyExecute()`).
+
+### Phương Thức Ký Hiệu `init()`
+
+Phương thức `init` chỉ đơn thuần là một hàm trống, chức năng duy nhất là trả về chính xác cùng một đối tượng trạng thái đã được đóng băng. Nó tồn tại **hoàn toàn vì mục đích dễ đọc mã nguồn và trải nghiệm của lập trình viên (DX)**.
+
+Mục đích chính của nó là cung cấp cho lập trình viên một cách để đánh dấu một cách tường minh và trực quan ngay trong mã nguồn vị trí chính xác xảy ra quá trình khởi tạo (lần gọi đầu tiên) của singleton. Từ góc độ kỹ thuật, `const state = useTheme()` và `const state = useTheme().init()` hoạt động hoàn toàn giống hệt nhau.
+
+```typescript
+// Ở một nơi nào đó sâu trong cây component, chúng ta chỉ cần lấy trạng thái đã sẵn sàng
+const theme = useTheme()
+
+// Còn ở đây, trong component gốc (hoặc main.ts), 
+// chúng ta chủ động hiển thị cho các lập trình viên khác thấy: "Quá trình khởi tạo diễn ra ngay TẠI ĐÂY"
+const theme = useTheme().init()
+```
+## Hướng Dẫn Từng Bước: Cách Tạo và Sử Dụng Dịch Vụ Của Riêng Bạn
+
+Việc tạo một singleton được quản lý bằng `executeUse` thường bao gồm ba bước đơn giản.
+
+### Bước 1: Định Nghĩa Trạng Thái (Factory)
+Trước tiên, hãy quyết định bạn cần loại trạng thái nào (`global`, `local` hoặc `provide`). Tạo một tệp riêng biệt (ví dụ: `useMyService.ts`). Sử dụng một trong các hàm factory (ví dụ: `executeUseGlobal`).
+
+Bên trong hàm callback, hãy định nghĩa tất cả các biến phản ứng (`ref`, `reactive`), thuộc tính tính toán (`computed`) và các hàm để thay đổi trạng thái:
+
+```typescript
+// src/composables/useMyService.ts
+import { ref, computed } from 'vue'
+import { executeUseGlobal } from '@dxtmisha/functional'
+
+// Tạo singleton và đóng gói cơ chế logic
+const instance = executeUseGlobal(() => {
+  // 1. Trạng thái phản hồi
+  const count = ref(0)
+  
+  // 2. Thuộc tính tính toán
+  const isPositive = computed(() => count.value > 0)
+  
+  // 3. Phương thức quản lý
+  const increment = () => count.value++
+  const reset = () => { count.value = 0 }
+
+  // Trả về những gì cần được bộc lộ ra bên ngoài
+  return { count, isPositive, increment, reset }
+})
+
+// Xuất ra một hàm bọc ngoài (wrapper).
+// Cú pháp () => instance() là điều cần thiết để giúp các trình soạn thảo mã (IDE)
+// nhận diện useMyService chính xác là một hàm composable.
+// Điều này đảm bảo tính năng tự động hoàn thành mã (autocomplete) và suy luận kiểu hoạt động đúng.
+export const useMyService = () => instance()
+```
+
+### Bước 2: Khởi Tạo (Chỉ dành cho `global`)
+Nếu bạn chọn chế độ `global` (như trong ví dụ trên), bạn cần báo cho ứng dụng biết chính xác thời điểm thể hiện nó. Điều này thường được thực hiện một lần tại điểm xâm nhập (`main.ts`):
+
+```typescript
+// src/main.ts
+import { createApp } from 'vue'
+import { executeUseGlobalInit } from '@dxtmisha/functional'
+import App from './App.vue'
+
+// Khởi tạo toàn bộ các global singleton cùng một lúc
+executeUseGlobalInit() 
+
+createApp(App).mount('#app')
+```
+
+> **Lưu ý:** Nếu ứng dụng của bạn sử dụng `dxtFunctionalPlugin`, bạn **không cần phải** gọi `executeUseGlobalInit()` một cách thủ công lúc khởi động — plugin đã tự động xử lý việc này ở hậu trường.
+
+### Bước 3: Sử Dụng trong Component
+Bây giờ bạn có thể nhập hàm `useMyService` của mình vào bất kỳ component Vue nào. Tại lần gọi định danh đầu tiên, hãy sử dụng phương thức `init()` để mã rõ ràng hơn.
+
+```vue
+<!-- src/components/MyComponent.vue -->
+<script setup lang="ts">
+import { useMyService } from '@/composables/useMyService'
+
+// Nhận trực tiếp trạng thái. Phương thức init() cho biết
+// lệnh gọi (truy cập) chính đầu tiên đang xảy ra ở đây.
+const { count, isPositive, increment } = useMyService().init()
+</script>
+
+<template>
+  <div>
+    <p>Số đếm hiện tại: {{ count }}</p>
+    <p>Có dương không? {{ isPositive ? 'Có' : 'Không' }}</p>
+    <button @click="increment">Tăng Dần</button>
+  </div>
+</template>
+```
+
+Nếu vì lý do nào đó, bạn cần thiết lập lại trạng thái (ví dụ: khi người dùng đăng xuất), bạn chỉ cần gọi phương thức reset tích hợp sẵn:
+```typescript
+const service = useMyService()
+if (service.destroyExecute) {
+  service.destroyExecute()
+}
+```
+
+## Enum `ExecuteUseType`
+
+### `provide` (singleton phạm vi component, mặc định)
+
+Đây là một singleton định hướng component, được liên kết chặt chẽ với vòng đời của một component Vue và toàn bộ cây con của nó. Bên dưới, nó sử dụng cơ chế truyền ngữ cảnh và phản ứng tích hợp sẵn của Vue (`provide`/`inject`), cho phép bạn truyền cùng một phiên bản trạng thái (state instance) sâu xuống cây component một cách an toàn mà không cần phải truyền qua các props.
+
+**Khi nào sử dụng:** 
+- Để chia sẻ trạng thái trong một nhánh component được chỉ định (component cha -> nhiều cấp lồng nhau -> component con), tránh làm ô nhiễm kho lưu trữ (store) toàn cục.
+- Khi cần hiển thị nhiều khối độc lập trên cùng một trang (ví dụ: một vài widget tải tệp lên phức tạp), mỗi khối cần có một trạng thái duy nhất, dùng chung riêng bên trong widget đó.
+- Nếu bạn cần dọn dẹp bộ nhớ tự động (garbage collection) ngay khi "component chủ" bị hủy (unmount).
+
+**Cách hoạt động:**
+Component gọi hàm này đầu tiên tự động trở thành "chủ sở hữu" (owner). Hàm tạo đối tượng và ngay lập tức gọi `provide(id, instance)`. Mọi component con (bên trong) khi gọi cùng một hàm này sẽ không tạo ra đối tượng mới mà lấy đối tượng đã tạo trước đó qua `inject(id)`. 
+> Chú ý: Loại này thiếu phương thức `destroyExecute()` vì bộ nhớ được tự do hóa một cách tự động nhờ hệ thống phản ứng (reactivity) của Vue tại thời điểm hủy component.
+
+```typescript
+import { executeUseProvide } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+const useTheme = executeUseProvide(() => {
+  const mode = ref<'light' | 'dark'>('light')
+  const toggle = () => { mode.value = mode.value === 'light' ? 'dark' : 'light' }
+  return { mode, toggle }
+})
+
+// Trong component cha (chủ) — đối tượng được tạo và phát đi (provide):
+const theme = useTheme()
+theme.toggle()
+
+// Trong component con lồng sâu — nó nhận về cùng một đối tượng qua inject:
+const theme = useTheme()
+
+// Ở một cây component hoàn toàn khác biệt, độc lập — một đối tượng MỚI sẽ được tạo:
+const theme2 = useTheme()
+```
+
+### `global` (singleton toàn ứng dụng)
+
+Đây là một mẫu kiến trúc (architectural pattern) Singleton cổ điển, tồn tại như một phiên bản duy nhất cực kỳ nghiêm ngặt trong toàn bộ thời gian tồn tại của ứng dụng của bạn (từ lúc tạo cho đến khi đóng tab trình duyệt). Nó cung cấp một điểm truy cập toàn cục vào trạng thái từ bất kỳ vị trí thực tế nào trong mã nguồn.
+
+**Khi nào sử dụng:**
+- Dùng cho trạng thái toàn cục của ứng dụng: thông tin xác thực, tài khoản người dùng, thiết lập ngôn ngữ, giỏ hàng toàn cục.
+- Khi một dữ liệu cần được chia sẻ cho các khối thành phần khác biệt, độc lập nhau trong chương trình (hoặc bên ngoài component Vue, như ở router).
+- Như một biện pháp thay thế dung lượng nhỏ cho Vuex / Pinia trong các tác vụ đơn giản.
+
+**Cách hoạt động:**
+Hàm khởi tạo sẽ **không thực thi ngay khi gọi**. Tuy nhiên, nó sẽ được chuyển tới một hàm đợi bên trong (`globalMethods`). Mọi đối tượng toàn cục chỉ khởi tạo đầy đủ khi trực tiếp gọi hàm `executeUseGlobalInit()`, chủ yếu thường nằm trong tệp `main.ts` trước khi ứng dụng được mount. Kể từ lúc ấy, mọi khối sẽ chia sẻ với nhau cùng một đối tượng được cache trong bộ nhớ.
+
+```typescript
+import { executeUseGlobal, executeUseGlobalInit } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+const useAuth = executeUseGlobal(() => {
+  const user = ref<string | null>(null)
+  const login = (name: string) => { user.value = name }
+  const logout = () => { user.value = null }
+  return { user, login, logout }
+})
+
+// Trong tệp main.ts — tuân thủ TRƯỚC thời điểm mount app (app.mount()):
+executeUseGlobalInit()
+
+// Ở mọi block component, utility hay router:
+const auth = useAuth()
+auth.login('Alice')
+
+// Trong trường hợp bắt buộc phải đặt lại trạng thái (tạo lại trạng thái nguyên mẫu từ đầu):
+auth.destroyExecute?.() 
+```
+
+### `local` (singleton lưu trong closure)
+
+Đây là một singleton hoạt động độc lập, dựa trên cơ chế kết thúc từ vựng (`closure caching`) trong JavaScript. Thay vì dùng ngữ cảnh Vue hay phạm vi toàn cục, nó bảo tồn kết quả đã tạo ra một lần trực tiếp ngay trong bộ nhớ nội bộ của hàm, và trả về nó ngay lập tức trong tất cả các lần gọi tiếp theo.
+
+**Khi nào sử dụng:**
+- Dùng cho utilities, các tác vụ nhà máy (factory) hay các service riêng biệt không quy bám vào Vue (bởi vì `provide`/`inject` chỉ tác dụng bên trong scope của `setup`).
+- Tại lúc muốn lấy cá thể độc quyền dành cho những dịch vụ nặng hoặc tốn kém chỉ duy nhất tại lúc nào thiệt cần (khởi động trễ thụy động laziness on demand), mà không phải thời gian đầu trong chu kỳ chung.
+- Ở những lần dùng phép lưu hệ số tạm thời (cache) những hoạt hóa tính toán, chuyển đổi của phép hệ thống lớn.
+
+**Cách hoạt động:**
+Loại này không màng đến cơ chế Vue. Ngay gọi hàm lần bước 1 tiên phong, các chức năng hàm của tham số đưa lên sẽ lập tức thi triển. Hệ trả xuất ra định chặt `Object.freeze` (bị đóng băng hoàn trả) lại cất vào trong một biến thể nội bộ giữa đám đóng của hàm `executeUse`. Những lần thứ kế theo (đôi khi cho là tham số sai số) nó vẫn nhả thẳng dữ liệu từ cùng cái chỗ kia nhanh chóng.
+Phương pháp `destroyExecute()` quét dọn biến của đợt trong vòng, châm ngọn cho sự tái bật khởi động cho thời kỳ lần tiếp khởi xưởng sau này.
+
+```typescript
+import { executeUseLocal } from '@dxtmisha/functional'
+import { ref } from 'vue'
+
+const useHeavyConfig = executeUseLocal((env: string) => {
+  // Thực hiện một thao tác phân giải số liệu config tải siêu lớn...
+  const config = ref({ api: `https://${env}.example.com` })
+  return { config }
+})
+
+// Chạy lần đầu — Quá trình sinh diễn
+const devConfig = useHeavyConfig('dev')
+console.log(devConfig.config.value.api) // https://dev.example.com
+
+// Lần gọi hai bên file nào đi tữa — Sẽ luôn ra đúng một đằng, mọi lệnh chèn sau vô tác dụng
+const sameConfig = useHeavyConfig('prod') 
+console.log(sameConfig.config.value.api) // Vẫn là kết quả cũ: https://dev.example.com
+
+// Ép việc phá hủy kho tạm
+sameConfig.destroyExecute?.()
+const newConfig = useHeavyConfig('prod') // Bắt đầu tái xuất bản quy trình một lần nữa
+```
+
+## `executeUseGlobalInit`
+
+```typescript
+function executeUseGlobalInit(): void
+```
+
+Gọi tất cả các hàm khởi tạo toàn cục đã đăng ký (`ExecuteUseType.global`) và xóa hàng đợi. Gọi lại lần nữa sẽ không khởi tạo lại các singleton đã tồn tại. Cần được gọi **một lần** khi khởi động ứng dụng — trước khi mount component gốc.
+
+```typescript
+import { createApp } from 'vue'
+import { executeUseGlobalInit } from '@dxtmisha/functional'
+import App from './App.vue'
+
+executeUseGlobalInit()
+createApp(App).mount('#app')
+```
+

package/src/media/functional/functional/functions/getBind/getBind.en.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional/Functions/getBind - Binding Generation'/>
+
+# `getBind`
+
+Base utility function for generating a properties object for a subcomponent based on normal (non-reactive) values. It handles various input types and ensures a consistent structure for property binding.
+
+**Parameters:**
+- `value: T | R | undefined | null` — The input value to be bound. Can be a primitive or an object.
+- `nameExtra: ItemList | string = {}` — Additional properties to merge or the name of the property to use if `value` is not an object.
+- `name: string = 'value'` — The default property name (defaults to `'value'`).
+- `except: boolean = false` — If true, skips the check requiring a primary key in the `value` object.
+
+**Returns:**
+`ConstrBind<R>` — An object containing the properties ready for binding.
+
+```typescript
+import { getBind } from '@dxtmisha/functional'
+
+// Case 1: Simple value
+const bind1 = getBind('Hello', {}, 'label') 
+// Result: { label: 'Hello' }
+
+// Case 2: Object with extra properties
+const bind2 = getBind({ id: 1 }, { class: 'active' }, 'data')
+// Result: { id: 1, class: 'active' }
+```

package/src/media/functional/functional/functions/getBind/getBind.ru.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional/Functions/getBind - Генерация привязок'/>
+
+# `getBind`
+
+Базовая утилитарная функция для генерации объекта свойств для подкомпонента на основе обычных (нереактивных) значений. Она обрабатывает различные типы входных данных и обеспечивает согласованную структуру для привязки свойств.
+
+**Параметры:**
+- `value: T | R | undefined | null` — Входное значение для привязки. Может быть примитивом или объектом.
+- `nameExtra: ItemList | string = {}` — Дополнительные свойства для объединения или имя свойства, если `value` не является объектом.
+- `name: string = 'value'` — Имя свойства по умолчанию (по умолчанию `'value'`).
+- `except: boolean = false` — Если true, пропускает проверку на наличие первичного ключа в объекте `value`.
+
+**Возвращает:**
+`ConstrBind<R>` — Объект, содержащий свойства, готовые к привязке.
+
+```typescript
+import { getBind } from '@dxtmisha/functional'
+
+// Вариант 1: Простое значение
+const bind1 = getBind('Привет', {}, 'label') 
+// Результат: { label: 'Привет' }
+
+// Вариант 2: Объект с дополнительными свойствами
+const bind2 = getBind({ id: 1 }, { class: 'active' }, 'data')
+// Результат: { id: 1, class: 'active' }
+```

package/src/media/functional/functional/functions/getBind/getBind.vi.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional/Functions/getBind - Tạo liên kết'/>
+
+# `getBind`
+
+Hàm tiện ích cơ bản để tạo đối tượng các thuộc tính cho một thành phần phụ dựa trên các giá trị bình thường (không phản ứng). Nó xử lý các loại đầu vào khác nhau và đảm bảo cấu trúc nhất quán cho việc liên kết thuộc tính.
+
+**Tham số:**
+- `value: T | R | undefined | null` — Giá trị đầu vào cần liên kết. Có thể là kiểu nguyên thủy hoặc đối tượng.
+- `nameExtra: ItemList | string = {}` — Các thuộc tính bổ sung để hợp nhất hoặc tên của thuộc tính sẽ sử dụng nếu `value` không phải là một đối tượng.
+- `name: string = 'value'` — Tên thuộc tính mặc định (mặc định là `'value'`).
+- `except: boolean = false` — Nếu true, sẽ bỏ qua việc kiểm tra yêu cầu khóa chính trong đối tượng `value`.
+
+**Trả về:**
+`ConstrBind<R>` — Một đối tượng chứa các thuộc tính sẵn sàng để liên kết.
+
+```typescript
+import { getBind } from '@dxtmisha/functional'
+
+// Trường hợp 1: Giá trị đơn giản
+const bind1 = getBind('Xin chào', {}, 'label') 
+// Kết quả: { label: 'Xin chào' }
+
+// Trường hợp 2: Đối tượng với các thuộc tính bổ sung
+const bind2 = getBind({ id: 1 }, { class: 'active' }, 'data')
+// Kết quả: { id: 1, class: 'active' }
+```