create-adaptable-composable
Создание адаптируемого Vue composable
Создание Vue composables с гибкими типами входных данных — сложная задача. Этот скилл предоставляет шаблон для создания библиотечных composables, которые принимают как реактивные, так и не реактивные входные данные, используя типы MaybeRef и MaybeRefOrGetter.
Скачать ZIP навыка
Загрузить в Claude
Перейдите в Settings → Capabilities → Skills → Upload skill
Включите и начните использовать
Протестировать
Использование «create-adaptable-composable». Создайте composable useDocumentTitle, который принимает MaybeRefOrGetter для заголовка
Ожидаемый результат:
- import { watch, toRef } from 'vue'
- import type { MaybeRefOrGetter } from 'vue'
- export function useDocumentTitle(title: MaybeRefOrGetter<string>) {
- watch(toRef(title), (t) => {
- document.title = t
- }, { immediate: true })
- }
Использование «create-adaptable-composable». Создайте composable useCounter с MaybeRef для начального счёта
Ожидаемый результат:
- import { watch, toRef } from 'vue'
- import type { MaybeRef } from 'vue'
- function useCounter(count: MaybeRef<number>) {
- const countRef = toRef(count)
- function add() {
- countRef.value++
- }
- return { add }
- }
Аудит безопасности
БезопасноStatic analyzer flagged TypeScript template literals as shell backticks and random text patterns as cryptographic algorithms. All findings are false positives. The skill contains only Vue.js documentation with TypeScript code examples for creating composables. No shell commands, cryptographic code, or security risks exist.
Проблемы высокого риска (2)
Проблемы среднего риска (1)
Оценка качества
Что вы можете построить
Создание менеджера заголовков только для чтения
Создайте composable, который устанавливает заголовок документа и принимает заголовок как MaybeRefOrGetter, позволяя использовать простые строки, refs или функции-геттеры.
Создание composable счётчика с записью
Создайте composable счётчика с MaybeRef входным значением для начального счёта, обеспечив двустороннее связывание с реактивными и не реактивными значениями.
Проектирование гибкого обработчика полей формы
Спроектируйте composables, которые принимают DOM-элементы или вычисляемые цели как MaybeRefOrGetter для гибкой обработки ввода в различных контекстах.
Попробуйте эти промпты
Создайте адаптируемый composable под названием useUserPreferences, который принимает MaybeRefOrGetter для настройки темы. Комposable должен следить за значением и применять тему к телу документа.
Создайте composable useLocalStorage, который принимает MaybeRef для начального значения и ключа. Комposable должен синхронизировать значение ref с localStorage и возвращать writable ref.
Создайте composable useDebouncedValue, где входными данными является MaybeRefOrGetter. Используйте watch() с toRef() для реактивных источников и возвращайте вычисляемое значение, которое обновляется с задержкой.
Спроектируйте composable useFormValidator, который принимает несколько MaybeRef входных данных для значений полей формы и MaybeRefOrGetter для правил валидации. Нормализуйте все входные данные и верните состояние валидации.
Лучшие практики
- Используйте MaybeRefOrGetter для входных данных только для чтения, удобных для вычислений, чтобы принимать refs, getters или простые значения
- Используйте toRef() внутри источников watch/watchEffect для корректного разрешения реактивных зависимостей
- Используйте toValue() для нормализации не реактивных значений для извлечения фактических значений
- Избегайте MaybeRefOrGetter для параметров функций, которые могут быть callback-функциями, чтобы предотвратить случайный вызов
Избегать
- Не передавайте пользовательские callbacks напрямую в MaybeRefOrGetter без type guards
- Не нормализуйте входные данные вне реактивных контекстов, таких как watch или watchEffect
- Не смешивайте toRef() и toValue() непоследовательно внутри одного composable
- Не предполагайте, что все параметры должны быть MaybeRef — используйте обычные типы, когда реактивность не нужна