# 创建与绑定应用状态变量
在UI引擎中，应用状态变量是一种基于Vue 3官方状态管理库Pinia构建的全局共享响应式数据容器。它覆盖当前前端项目的所有页面，能够实现跨页面的数据共享、状态同步和业务联动。
当应用状态变量的值发生变化时，所有绑定该变量的组件会自动同步更新，无需手动刷新，是构建复杂协同型工业应用的关键机制。
本文介绍如何创建应用状态变量，并将其绑定到组件属性，以实现全局数据驱动的交互效果。
#### 前提条件
已进入目标项目的页面设计器，具体操作请参见[进入前端项目页面设计器](https://support.huaweicloud.com/usermanual-idme/idme_ui_0014.html)。
#### 创建应用状态变量
1. 在页面设计器的左侧插件功能区，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532655011.png)，展开"状态管理"面板。
   
   图1状态管理面板   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500895098.png)
   
   
2. 切换至"应用状态"页签，单击"添加全局变量"，展开"添加全局变量"页面。
3. 在展开的"添加全局变量"页面，设置如下信息。 
   图2添加全局变量   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002501054944.png "点击放大")
   表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; } ```                                          |
      
   
   
4. 配置完成后，单击"保存"。 
   创建成功后，可通过"this.stores.变量名"。例如，"stores"名称为"userProfile"，则：
   - 访问整体状态："this.stores.userProfile"
   
   - 访问具体属性："this.stores.userProfile.name"
   
   
   
   
 
#### 绑定状态变量到组件属性
将应用状态变量与组件属性绑定后，可实现全局数据驱动的组件交互，变量值变化时组件属性会自动同步更新。
1. 在页面设计器的中心画布区，单击选中目标组件。
2. 在右侧设置面板中，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532857021.png)，展开"属性"设置面板。
3. 找到需要绑定状态变量的属性，单击其右侧的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002532776973.png)，弹出"变量绑定"窗口。
4. 在"变量列表"中，选择"应用状态"分类下的目标变量：（如"this.stores.userProfile.name"），也可在"变量"编辑器中手动输入完整访问路径（如"this.stores.userProfile.age"）。 
   图3绑定应用变量   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002500937120.png "点击放大")
   
   
5. 单击"确定"，完成组件属性与应用状态变量的绑定。 
   绑定后，无论哪个页面修改了该状态，当前组件都将实时响应更新。