OpenBlocks中的临时状态(Temporary State)使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00379/article/details/148488056

OpenBlocks中的临时状态(Temporary State)使用指南

openblocks 🔥 🔥 🔥 The Open Source Retool Alternative 项目地址: https://gitcode.com/gh_mirrors/op/openblocks

什么是临时状态

在OpenBlocks应用开发中，临时状态(Temporary State)是一种用于存储和引用应用内本地数据的机制。它的特点是每次加载或刷新应用时，临时状态的值都会被重置为初始值。

临时状态与常规变量不同，它具有以下特性：

生命周期仅限于当前应用会话
可以在应用的不同组件间共享数据
提供专门的方法来更新状态值
支持复杂的数据结构如对象和数组

适用场景

临时状态在以下开发场景中特别有用：

用户交互跟踪：记录用户在应用中的临时操作数据，如表单填写过程中的中间值
非持久化存储：需要临时保存但不需要存入数据库的数据
扩展内置属性：当OpenBlocks内置属性(如表单值、表格选中行等)无法满足需求时，可用作补充
中间计算结果：存储计算过程中的中间结果

创建临时状态

在OpenBlocks中创建临时状态非常简单：

在查询编辑器中点击"新建"按钮
选择"临时状态"选项
为状态命名并设置初始值

初始值可以是任何JavaScript支持的数据类型，包括：

基本类型：数字、字符串、布尔值
复杂类型：对象、数组
特殊值：null、undefined

状态值操作方法

OpenBlocks为临时状态提供了两种主要的值操作方法：

1. setValue()方法

setValue()用于直接设置状态的整个值：

// 语法：state.setValue(value: any)
state.setValue(42)  // 设置为数字
state.setValue("Hello")  // 设置为字符串
state.setValue({name: "John", age: 30})  // 设置为对象

2. setIn()方法

当状态值为嵌套对象或数组时，可以使用setIn()方法修改特定路径下的值：

// 假设初始状态值为：
{
  user: {
    name: "Alice",
    address: {
      city: "Beijing",
      street: "Main St"
    }
  },
  scores: [85, 90, 78]
}

// 修改嵌套属性
state.setIn(['user', 'address', 'city'], "Shanghai")

// 修改数组元素
state.setIn(['scores', 1], 95)  // 将第二个分数改为95

实际应用示例：计数器

让我们通过一个完整的计数器示例来演示临时状态的实际应用：

功能需求

显示当前计数值的文本组件
点击按钮时计数值增加1
每次刷新应用时计数器重置为0

实现步骤

创建UI组件：
- 添加一个文本组件text1用于显示计数值
- 添加一个按钮组件button1用于触发计数
设置临时状态：
- 创建名为counter的临时状态
- 设置初始值为0
- 将text1的显示文本绑定到{{counter.value}}
配置按钮事件：
- 为button1添加点击事件处理器
- 选择"设置临时状态"动作
- 使用setValue方法，设置值为{{counter.value + 1}}
替代实现方案：也可以通过JavaScript查询实现同样功能：
```
// 创建名为incrementCounter的JS查询
counter.setValue(counter.value + 1)
```
然后在按钮点击事件中调用此查询。