API провайдера

useFeatureProvider() — полный доступ к внутреннему устройству провайдера, для императивного управления флагами, наблюдаемости и продвинутых интеграций.

function useFeatureProvider(): FeatureProvider

import { useFeatureProvider } from 'vue-feature-toggles'

const provider = useFeatureProvider()

Выбрасывает ошибку, если вызван вне дерева компонентов, где установлен плагин FeatureToggles.

Реактивное состояние

Свойство	Тип	Описание
flags	Ref<Record<string, FlagValue>>	Все текущие, полностью разрешённые значения флагов
isLoading	Ref<boolean>	true, пока работает loader
isReady	Ref<boolean>	true после завершения первого разрешения

Методы управления

isEnabled(name: string): boolean
setFlag(name: string, value: boolean, options?: SetFlagOptions): void
resetFlag(name: string): void
resetAll(): void
reload(): Promise<void>
getFlagSource(name: string): FlagSource

getFlagSource() возвращает, какой уровень приоритетной цепочки сейчас определяет флаг: 'url' | 'runtime' | 'rules' | 'loader' | 'static' | 'schedule' | 'default'.

Методы вариантов

getVariant(name: string): string
setVariant(name: string, variant: string, options?: SetFlagOptions): void

setVariant() принимает ту же опцию { persist: true }, что и setFlag() — вариантные переопределения можно сохранять в localStorage точно так же, как булевы.

Переменные

Переменные привязаны к флагу и разделяют его цепочку приоритетов. Их можно переопределить через URL или setVariable.

app.use(FeatureToggles, {
  flags: { newCheckout: true },
  variables: {
    newCheckout: {
      maxItems: 5,
      theme: 'dark',
      buttonLabel: 'Place order',
    },
  },
})

const { getVariable, setVariable } = useFeatureProvider()

const maxItems = getVariable<number>('newCheckout', 'maxItems') // Ref<number>
const theme = getVariable<string>('newCheckout', 'theme') // Ref<string>

setVariable('newCheckout', 'maxItems', 10)

Переопределение через URL: ?feature-var:newCheckout:maxItems=10

Группы

const { setGroup, resetGroup, isGroupEnabled } = useFeatureProvider()

setGroup('beta', false) // выключить все бета-флаги
setGroup('maintenance', true)
isGroupEnabled('beta') // true, только когда включены ВСЕ флаги в группе

<Feature group="beta"><BetaLabel /></Feature>

Зависимости

Если требуемый флаг отключён, зависимый флаг принудительно выключается автоматически.

app.use(FeatureToggles, {
  flags: { aiSuggestions: true, newSearch: false },
  dependencies: { aiSuggestions: ['newSearch'] },
})
// aiSuggestions принудительно false, потому что newSearch равен false

const { getDependencyViolations } = useFeatureProvider()
// → { aiSuggestions: ['newSearch'] }

При нарушении в консоли разработчика выводится предупреждение.

Профили

saveProfile(name: string, flags: Record<string, FlagValue>): void
loadProfile(name: string): void  // 'default' → resetAll()
listProfiles(): string[]

Именованные наборы переопределений, хранимые в localStorage — полезны для QA, демо и дизайн-ревью.

const { saveProfile, loadProfile, listProfiles } = useFeatureProvider()

saveProfile('demo-mode', {
  newDashboard: true,
  betaSearch: true,
  maintenanceMode: false,
})

loadProfile('demo-mode') // применяет все флаги из профиля как runtime-переопределения
loadProfile('default') // сбрасывает к исходным значениям (вызывает resetAll)

listProfiles() // → ['demo-mode']

Панель <FeatureDevTools> показывает выпадающий список профилей, когда они существуют.

Персистентность

isPersisted(name: string): boolean
clearPersistedFlags(): void

Метаданные и срок действия

getFlagMeta(name: string): FlagMeta | undefined
isExpired(name: string): boolean

SSR

serialize(): Record<string, FlagValue>

Возвращает полностью разрешённую карту флагов для встраивания в серверно-отрендеренный HTML — см. SSR / гидратация.

Подписка

watchFlag(name: string, callback: (value, oldValue) => void, options?: WatchFlagOptions): WatchStopHandle

const stop = watchFlag('darkMode', (value, oldValue) => {
  applyTheme(value ? 'dark' : 'light')
})
// позже: stop()

Интроспекция раската и расписания

getRollout(name: string): number | undefined
getSchedule(name: string): FlagSchedule | undefined
isScheduleActive(name: string): boolean

См. Постепенный раскат и расписание, как они настраиваются.

Интроспекция

listVariables(flagName: string): string[]
listGroups(): Record<string, string[]>

Частые паттерны

// Аварийный выключатель
setFlag('newPaymentFlow', false)

// Route guard
router.beforeEach((to) => {
  const { isEnabled } = useFeatureProvider()
  if (to.meta.feature && !isEnabled(to.meta.feature as string)) {
    return { name: 'NotFound' }
  }
})