Temporary State

Временные состояния в Apeekflow — мощная функция, используемая для управления сложными переменными, которые динамически обновляют состояние компонентов вашего приложения. Эти состояния служат промежуточным или временным хранилищем данных, которые могут изменяться с течением времени из-за взаимодействия с пользователем или других процессов.

В Apeekflow временные состояния особенно полезны при работе со сценариями, когда требуется обновить состояние компонента на основе пользовательского ввода или других динамических условий. Привязывая эти состояния к компонентам с помощью синтаксиса Handlebars, вы можете создавать высокоинтерактивные и отзывчивые пользовательские интерфейсы.

Вот краткий обзор того, как работают временные состояния в Apeekflow:

1. Определение и инициализация: временные состояния определяются в среде Apeekflow. Они инициализируются значением по умолчанию, которое может быть простым типом данных, таким как строка или число, или более сложными объектами и массивами.

2. Привязка к компонентам: эти состояния затем привязываются к компонентам пользовательского интерфейса с использованием синтаксиса Handlebars. Например, {{tempState}} связал бы значение tempState к компоненту. Эта привязка гарантирует, что любые изменения временного состояния немедленно отражаются в компоненте.

3. Динамические обновления: когда пользователи взаимодействуют с приложением, такие действия, как нажатие кнопки, ввод текста или выбор опции из выпадающего списка, могут приводить к обновлению этих временных состояний. Это может быть как простым обновлением текстового значения, так и сложным изменением структуры массива или объекта.

4. Реактивность: ключевым преимуществом использования временных состояний является их реактивность. При изменении временного состояния все компоненты, привязанные к этому состоянию, автоматически обновляются, чтобы отразить новое значение. Эта реактивность имеет решающее значение для создания динамичного и гибкого пользовательского интерфейса.

5. Варианты использования: вбщие варианты использования временных состояний включают обработку ввода в форму, переключение видимости элементов пользовательского интерфейса, временное хранение пользовательских настроек и управление состоянием интерактивных элементов, таких как аккордеоны, вкладки и модальные элементы.

6. Жизненный цикл: временные состояния в Apeekflow, как правило, недолговечны. Они существуют на время выполнения конкретной задачи или взаимодействия с пользователем и не сохраняются при разных сеансах или перезагрузках страниц, в отличие от более постоянных решений для управления состоянием.

Используя временные состояния, Apeekflow позволяет разработчикам с легкостью создавать сложные приложения, управляемые состоянием, обеспечивая соответствие пользовательского интерфейса базовому состоянию приложения и обеспечивая бесперебойную работу для конечного пользователя.

Сценарии использования

Временные состояния могут помочь в следующих сценариях:

• Чтобы отслеживать временные значения переменной, когда пользователь взаимодействует с вашим приложением.

• Хранить ваши данные только в рабочем состоянии, не сохраняя их в базе данных.

• Чтобы функционировать как временное свойство при использовании встроенных свойств в Apeekflow (таких как {{table.selectedRow}} и {{select.value}}) не поддерживайте свой вариант использования.

Чтобы хранить данные в разных приложениях в вашем рабочем пространстве и получать к ним доступ, используйте вместо этого localStorage.

Создайте временное состояние

Нажмите +Создать и выберите Временное состояние в редакторе запросов.

Вы можете переименовать временное состояние и задать начальное значение.

Установите значения состояния

Временные государственные предложения setValue() и setIn() методы для установки или изменения его значения, которые могут быть вызваны в запросах JavaScript.

Используйте setValue(), чтобы изменить значение напрямую.

//state.setValue(значение: любое)
state.setValue(3)
state.setValue(input1.value)

Если начальным значением временного состояния является объект, используйте setIn(), чтобы изменить значение по указанному пути.

// начальное значение состояния 2 выглядит следующим образом：
{
    girl: {
        name: "Lucy",
        age: 18,
        city: {
            name: "New York"
        }
     }
     boy: {
         name: "Bob",
         age: 21,
         city: {
             name: "Los Angeles"
         }
     }
}
//Чтобы изменить значение по указанному пути
//state.setIn(path, any value)
//путь: массив ключей или индексов. Будет изменен только последний элемент в пути.
state2.setIn(['girl','city'],{name:'Seatle'})
state2.setIn(['boy','age'],18)


// Чтобы задать значение массива value, вы можете использовать
// значение инициализации = ["hello", "world"]
state2.setIn([1],"foo") // это приведет к ["hello", "foo"]

Вы также можете вызвать эти два метода в обработчиках событий. Выберите Установить временное состояние в качестве действия и выберите метод по требованию.

Пример: Счетчик прироста

В этом примере счетчик отслеживает количество нажатий на кнопки. Каждый раз, когда пользователь нажимает на кнопку, число в текстовом компоненте увеличивается на единицу.

Создайте счетчик прироста, выполнив следующие действия:

1. Добавьте компонент кнопки button1 и компонент текста text1.

2. Создайте временное состояние state1, установите его начальное значение как 0. Свяжите {{state1.value}} в качестве отображаемого текста text1.

3. Добавьте обработчик событий для button1. Выберите действие Установить временное состояние и метод Установить значение, а затем установите {{state1.value+1}} как ценность.

4. Нажав на кнопку, вы сможете увидеть значение text1 увеличивается на единицу при каждом нажатии.

Вы также можете добиться того же результата, используя JavaScript-запросы:

1. Добавьте новый запрос, выберите Запустить JavaScript-код.

2. Напишите JavaScript-запрос с этим кодом и настройте его для вызова вручную: state1.setValue(state1.value + 1)

3. Добавьте обработчик событий из button1 к query1.

Теперь нажав на кнопку счетчика прироста, вы должны увидеть тот же результат, что и выше.