# 创建与绑定页面状态变量
在UI引擎中，页面状态变量是实现组件交互、数据绑定和动态业务逻辑的核心机制。它是一种响应式数据，当变量值发生变化时，所有绑定该变量的组件将自动更新，无需手动刷新或重新加载页面。
本文将指导您如何创建页面状态变量，并将其绑定到组件属性。
#### 前提条件
已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
#### 创建页面状态变量
1. 在页面设计器的左侧插件功能区，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500857226.png)，展开"状态管理"面板。
   
   图1状态管理面板   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532617917.png)
   
   
2. 在"页面状态"页签下，单击"添加变量"，展开"添加变量"页面。
3. 在展开的"添加变量"页面，设置如下信息。 
   图2添加页面变量   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500698714.png "点击放大")
   表1添加页面变量配置信息 
   | 参数名称   | 参数说明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
   |:---|:---|
   | 变量名    | 状态变量的唯一标识名称。 - 只能以字母或下划线（_）开头。  - 仅允许包含数字、字母和下划线（_）。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
   | 初始值类型  | 选择状态变量的初始值数据类型，支持以下两种类型： - JSON类型：适用于对象、数组等复杂数据结构。  - JS表达式类型：通过JavaScript表达式计算生成初始值。包含以下子类型： - 算数：返回数字（如"3.14159"、"1+2"）。  - 字符串：返回字符串（如""Fred""、""234""）。  - 逻辑值：返回布尔值（"true"/"false"）。  - 左值表达式：返回自定义类或预置类的对象实例（如"new Object()"）。  - 基本表达式：JavaScript基础关键字与表达式，不支持"this.propertyName"格式。     |
   | 初始值    | 根据所选的"初始值类型"，填写对应的初始值。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
   | getter | 在读取该状态变量时自动执行的逻辑（无返回值）。基于Vue 3的watchEffect实现，适用于日志记录、埋点、调试等场景。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
   | setter | 在赋值该状态变量时自动执行的逻辑（无返回值）。基于Vue 3的watchEffect实现，可用于数据校验、联动更新、触发其他操作等。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
      
   
   
4. 配置完成后，单击"保存"。 
   创建成功后，变量将以"this.state.变量名"的形式在页面中使用（如"this.state.userName"）。
   
   
 
#### 绑定状态变量到组件属性
将状态变量与组件属性绑定后，变量值的变化会自动同步至组件属性，从而实现数据驱动的组件交互。
1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500877948.png)，展开"属性"设置面板。
3. 找到需要绑定状态变量的属性，单击其右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500879036.png)，弹出"变量绑定"窗口。
4. 在"变量列表"中，选择"State属性"分类下的目标属性变量，也可在"变量"编辑器中手动输入"this.state.变量名"。
5. 单击"确定"，完成属性与状态变量的绑定。 
   绑定后，只要状态变量值更新，组件属性将实时同步，无需额外代码。
   
   
 
#### 后续操作
如需根据业务逻辑或服务端返回数据动态更新状态变量的值，可通过"页面JS"实现逻辑的动态更新（如接口回调、事件处理），从而构建完整的数据流闭环。详细操作请参见[通过页面JS实现UI引擎前端页面组件交互](https://support.huaweicloud.com/usermanual-idme/idme_ui_0082.html)。