Global State

$tState is the core reactive state tree provided by the TechUI component library via the Vue provide/inject mechanism. This documentation adds detailed types, default values, and options for each property based on the $tState object data you provided.

You can conveniently import the computed property of an element, for example: const { $gTheme } = inject("$global").

Universality and Differentiation

This chapter is a common chapter for all component libraries, aiming to explain the general architecture and global services of the TechUI ecosystem.

Given that different product versions (such as Prime, Scifi, Admin, etc.) have different functional positionings, some global states or functions displayed in the documentation may only be effective in specific component libraries.

Please be sure to pay attention to the applicable version tags marked next to each API when reading to distinguish its availability.

As shown in the following example:

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

This means that the Scifi component library does not support this option. If no such flag is specified, it is common to all component libraries.

globalConfig

Global Configuration: Users can usually modify these configurations during initialization or runtime.

• platform: Current component library type, used to determine whether to clear states in local cache based on this parameter (usually no need to use or modify).

  • Type: String
  • Default: Parameter is the name of each component library, such as Prime, Admin, Base, Scifi.
  • Computed Property: $gPlatform

• theme: Current theme name.

  • Type: String
  • Default: lightBlue
  • Computed Property: $gTheme

• themeScheme: Current theme color scheme.

  • Type: String
  • Default: light
  • Options: light, dark
  • Computed Property: $gThemeScheme

• t3D: Whether to enable 3D deformation for the Tui3DPanel component Limited to experience mode or authorized usage.

  • Type: Boolean
  • Default: true
  • Computed Property: $gT3D

• maskBlur: Whether to enable the background blur effect for the global mask.

  • Type: Boolean
  • Default: true
  • Computed Property: $gMaskBlur

• background: Background image rendering target.

  • Type: String
  • Default: all
  • Options: all, view, root, none
  • Computed Property: $gBackground

• menuTrigger: Menu trigger method.

  • Type: String
  • Default: click
  • Computed Property: $gMenuTrigger

• floaterTo: Selector for the anchor target element of global floating components.

  • Type: String
  • Default: #tuiAdpt
  • Computed Property: $gFloaterTo (There is also a logic computed property $optFloaterTo)

• resizeBy: Window size listening mode.

  • Type: String
  • Default: self
  • Options: self, root
  • Computed Property: $gResizeBy

• sound: Whether to enable system sound prompts.

  • Type: Boolean
  • Default: true
  • Computed Property: $gSound

• transition: Whether to enable all view transition animations.

  • Type: Boolean
  • Default: true
  • Computed Property: $gTransition

• adaptive: Screen adaptation mode.

  • Type: String
  • Default: extension
  • Options: fixed, flexible, stretch, extension, disabled
  • Computed Property: $gAdaptive

• version: Current framework version number.

  • Type: String
  • Default: Dynamically acquired based on core Wasm
  • Computed Property: $gVersion

globalState

Runtime Global State: These states are automatically maintained by the system. Manual maintenance is not recommended; monitoring and reading are suggested.

• fullScreen: Whether currently in full-screen mode.

  • Type: Boolean
  • Default: false
  • Computed Property: $gFullScreen

• maximize: Whether the current view is in a maximized state.

  • Type: Boolean
  • Default: false
  • Computed Property: $gMaximize

• siderCollapse: Whether the sidebar is in a collapsed state.

  • Type: Boolean
  • Default: false
  • Computed Property: $gSiderCollapse

• clickTarget: The target DOM element of the last click event.

  • Type: Object
  • Default: null
  • Computed Property: $gClickTarget

• clickCounter: Global continuous click counter.

  • Type: Number
  • Default: 0
  • Computed Property: $gClickCounter

• escCounter: Global ESC key press counter.

  • Type: Number
  • Default: 0
  • Computed Property: $gEscCounter

• resizeCounter: Window or root container size change counter.

  • Type: Number
  • Default: 0
  • Computed Property: $gResizeCounter (There is also a logic computed property $optResizeCounter)

• portletCounter: Module quantity count.

  • Type: Number
  • Default: 0
  • Computed Property: $gPortletCounter
  • Change Note: Migrated here from adaptiveConfig in version V0.0.7+.

globalParams

Global Parameters: Configuration values corresponding to CSS variables.

• blurSaturate: Blur saturation value.

  • Type: String
  • Default: 180%

• blurRange: Blur radius.

  • Type: Number
  • Default: 5

• initDur: Animation duration during the initialization phase.

  • Type: Number
  • Default: 1

viewTrans

View Transition Configuration: Controls animation effects parameters during page switching.

• curDur: Duration of the current transition animation.

  • Type: Number
  • Default: 1

• altDur: Duration of the alternative transition animation.

  • Type: Number
  • Default: 1

• curTarget: Target of the current transition animation.

  • Type: String
  • Default: root
  • Options: adpt, root, layout

• altTarget: Target of the alternative transition animation.

  • Type: String
  • Default: root

• curName: CSS class name of the currently active transition animation.

  • Type: String
  • Default: vt-overlap

• altNames: Collection of alternative/default animation names for various scenarios.

  • Type: Object
  • Default: { theme: "vt-circle-rt", ... }

deviceInfo

Device Information: Automatically detected based on the running environment.

• type: Device type.

  • Type: String
  • Default: null

• browser: Browser name and version.

  • Type: String
  • Default: null

• resolutionH: Screen horizontal resolution.

  • Type: Number
  • Default: null

• resolutionV: Screen vertical resolution.

  • Type: Number
  • Default: null

• touchable: Whether the device supports touch events.

  • Type: Boolean
  • Default: false

• orientation: Device screen orientation.

  • Type: String
  • Default: null

• screenInvert: Whether the screen is in an inverted state.

  • Type: Boolean
  • Default: false

controlPanel

Control Panel Configuration

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

• visible: Whether the control panel is visible.

  • Type: Boolean
  • Default: false

• modal: Whether the control panel is in modal mode.

  • Type: Boolean
  • Default: true

• width: Width of the control panel.

  • Type: Number
  • Default: 220

• extension: Additional items.

  • Type: Array
  • Default: []

• exclusion: Excluded items.

  • Type: Array
  • Default: []

attentionConfig

Message/Notification Component Configuration

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

• message: Message component configuration.

  • Type: Object
  • Default: { position: "top-center", offset: 0, ... }
  • Computed Property: $aMessage

• notification: Notification component configuration.

  • Type: Object
  • Default: { position: "top-right", offset: 0, ... }
  • Computed Property: $aNotification

• toast: Toast prompt configuration.

  • Type: Object
  • Default: { visible: false, duration: 3000, ... }
  • Computed Property: $aToast

• flash: Flash prompt configuration.

  • Type: Object
  • Default: { visible: false, appearance: "toast", ... }
  • Computed Property: $aFlash

• dispatcher: Attention dispatcher configuration.

  • Type: Object
  • Default: { visible: true, debug: false, ... }
  • Computed Property: $aDispatcher

popoverConfig

Popover Configuration

Availability:

✕ Scifi

✓ Base

✓ Admin

✓ Prime

• duration: Default display duration.

  • Type: Number
  • Default: 3000

• maxLength: Maximum number of simultaneous displays.

  • Type: Number
  • Default: 5

• appearance: Default appearance style.

  • Type: String
  • Default: poptip

t3dConfig

3D Feature Configuration

• inited: Whether the 3D renderer has been initialized.
  • Type: Boolean
  • Default: false

adaptiveConfig

Adaptive Layout Configuration

• ready: Whether the adaptive system has loaded configuration.

  • Type: Boolean
  • Default: false
  • Computed Property: $adptReady

• inited: Whether the adaptive system has been initialized.

  • Type: Boolean
  • Default: false
  • Computed Property: $adptInited

• resizeCounter: Size change count triggered by adaptation.

  • Type: Number
  • Default: 0
  • Computed Property: $aResizeCounter

• dragTip: Whether to show drag prompt.

  • Type: Boolean
  • Default: true

backgroundConfig

Background Configuration

• graphicType: Type of the current background graphic.

  • Type: String
  • Default: SvgPattern

• SvgPattern: Specific configuration object for SvgPattern type.

  • Type: Object
  • Default: {}

spinnerConfig

Loading Animation Configuration

• full: Animation configuration for full-screen loading.

  • Type: Object
  • Default: { name: "blocksA", size: 100 }

• area: Animation configuration for local area loading.

  • Type: Object
  • Default: { name: "pointA", size: 40 }

ADMIN

Backend Management System Module State

Availability:

✕ Scifi

✕ Base

✓ Admin

✓ Prime

Activated only when isActAdminFeatures is true.

• routerInited: Whether dynamic routing has been initialized.

  • Type: Boolean
  • Default: false
  • Computed Property: $ARouterInited

• maximize: Whether the current Tab view is maximized.

  • Type: Boolean
  • Default: false

• siderCollapse: Whether the sidebar is collapsed.

  • Type: Boolean
  • Default: false

• tabs: List of currently open Tab pages.

  • Type: Array
  • Default: []
  • Computed Property: $ATabs

• keepAlive: List of route names that currently require KeepAlive caching.

  • Type: Array
  • Default: ['home']
  • Computed Property: $AKeepAlive

• userInfoSto: Storage location for user information.

  • Type: String
  • Default: session
  • Computed Property: $AUserInfoSto

• userInfo: User basic information.

  • Type: Object
  • Default: { token: null, id: null, ... }
  • Computed Property: $AUserInfo

• menu: User's menu tree data.

  • Type: Array
  • Default: []
  • Computed Property: $AMenu

• permission: User's permission list data.

  • Type: Array
  • Default: []
  • Computed Property: $APermission

• dict: Global dictionary data.

  • Type: Object
  • Default: {}
  • Computed Property: $ADict

• componentRegister: Component registry.

  • Type: Object
  • Default: {}
  • Computed Property: $ARouterRegister

Quick Start

If debug mode is configured in main.js, you can quickly view the status of all current global services by entering tuiServiceState() in the console of the debugging tool, allowing for a quick grasp of the global state by comparing it with the documentation.

For enabling debug mode, please refer to the Start - Debug Mode chapter.