创建与绑定页面状态变量

前提条件

已进入目标项目的页面设计器，具体操作请参见进入前端项目页面设计器。

创建页面状态变量

1. 在页面设计器的左侧插件功能区，单击，展开“状态管理”面板。
   图1 状态管理面板
   

2. 在“页面状态”页签下，单击“添加变量”，展开“添加变量”页面。
3. 在展开的“添加变量”页面，设置如下信息。
   图2 添加页面变量
   

   表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. 在右侧设置面板中，单击，展开“属性”设置面板。
3. 找到需要绑定状态变量的属性，单击其右侧的，弹出“变量绑定”窗口。
4. 在“变量列表”中，选择“State属性”分类下的目标属性变量，也可在“变量”编辑器中手动输入“this.state.变量名”。
5. 单击“确定”，完成属性与状态变量的绑定。

   绑定后，只要状态变量值更新，组件属性将实时同步，无需额外代码。

后续操作

如需根据业务逻辑或服务端返回数据动态更新状态变量的值，可通过“页面JS”实现逻辑的动态更新（如接口回调、事件处理），从而构建完整的数据流闭环。详细操作请参见通过页面JS实现UI引擎前端页面组件交互。