更新时间：2025-12-30 GMT+08:00
创建与绑定应用状态变量
在UI引擎中，应用状态变量是一种基于Vue 3官方状态管理库Pinia构建的全局共享响应式数据容器。它覆盖当前前端项目的所有页面，能够实现跨页面的数据共享、状态同步和业务联动。
当应用状态变量的值发生变化时，所有绑定该变量的组件会自动同步更新，无需手动刷新，是构建复杂协同型工业应用的关键机制。
本文介绍如何创建应用状态变量，并将其绑定到组件属性，以实现全局数据驱动的交互效果。
前提条件
已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。
创建应用状态变量
- 在页面设计器的左侧插件功能区，单击
，展开“状态管理”面板。
图1 状态管理面板
- 切换至“应用状态”页签，单击“添加全局变量”，展开“添加全局变量”页面。
- 在展开的“添加全局变量”页面，设置如下信息。
图2 添加全局变量
表1 添加全局变量配置信息 参数名称
参数说明
stores
应用状态变量的全局唯一标识名称。
- 只能以字母或下划线（_）开头。
- 仅允许包含数字、字母和下划线（_）。
state
应用状态的初始数据。
仅支持非null的Object对象。
示例：
{ "name": "Lily", "age": 25 }getters
对“state”数据进行二次加工的派生计算属性（如格式化、过滤、聚合）。
定义规则：
- 使用“function”关键字声明具名函数。
- 函数接收当前“state”作为参数。
- 同一个应用状态可声明多个“getters”，每个“getters”生成一个可绑定状态，名称为函数名称。
示例：
function fullName(state) { return state.name + 'Doe'; }actions
封装修改“state”的逻辑，支持异步操作、校验、日志等。
定义规则：
- 使用“function”声明具名函数。
- 函数内部通过“this”访问当前“state”。
- 函数参数为外部传入的新值，仅可在“页面JS”中调用。
示例：
function updateAge(newAge) { this.age = newAge; } - 配置完成后，单击“保存”。
创建成功后，可通过“this.stores.变量名”。例如，“stores”名称为“userProfile”，则：
- 访问整体状态：“this.stores.userProfile”
- 访问具体属性：“this.stores.userProfile.name”
绑定状态变量到组件属性
将应用状态变量与组件属性绑定后，可实现全局数据驱动的组件交互，变量值变化时组件属性会自动同步更新。
- 在页面设计器的中心画布区，单击选中目标组件。
- 在右侧设置面板中，单击
，展开“属性”设置面板。 - 找到需要绑定状态变量的属性，单击其右侧的
，弹出“变量绑定”窗口。 - 在“变量列表”中，选择“应用状态”分类下的目标变量：（如“this.stores.userProfile.name”），也可在“变量”编辑器中手动输入完整访问路径（如“this.stores.userProfile.age”）。
图3 绑定应用变量
- 单击“确定”，完成组件属性与应用状态变量的绑定。
绑定后，无论哪个页面修改了该状态，当前组件都将实时响应更新。
父主题： 为UI引擎前端页面创建与管理状态
