UBOS Community

Daniel
Daniel

Posted on • Updated on

Глобальні змінні (storeValue)

Глобальні змінні корисні тим, що вони доступна на всіх сторінках. Її дані додаються в LocalStorge браузера, внаслідок цього їх можна використовувати для обміну інформації як і між всіма сторінками, так і в межах однієї.

Для прикладу створимо 3 віджети: 2 button, 1 text(щоб бачити, що в середині глобального об'єкта).

Image description

При настиканні на кнопку Submit, будемо створювати об'єкт. Ми можемо в нього додавати будь-який тип та об'єм даних. Для прикладу я використаю булеан(true, false) тип.

Створюємо глобальну зміну, викликаючи функцію storeValue('name', {key: value}). Де першим параметром пишемо строку, яка буде назвою глобальної змінної (за якою звертатимемось до неї). Другий параметр - це значення, яке хочемо зберегти.

Image description

У віджеті button _, при події _onClick вибираємо JS та пишемо код, в якому зберігаємо змінну з назвою example та властивістю true.

{{storeValue('example', true)}}  
Enter fullscreen mode Exit fullscreen mode

При натисканні на кнопку, створиться глобальна зміна. Щоб перевірити чи точно вона створилась, у віджеті текст ми виведемо її значення. Всі глобальні змінні зберігаються в об'єкті store, який знаходиться в головній змінній main (або по старому appsmith).
Image description
Для цього у віджеті text напишемо:

{{main.store.example}}
Enter fullscreen mode Exit fullscreen mode

Щоб перезаписати дані глобальної зміни, ми викликаємо storeValue з назвою змінної яку хочемо перезаписати.
Ми це напишемо у другій кнопці. Замінимо значення true на false. Та натиснемо на кнопку, щоб перезаписати.

{{storeValue('example', false)}}
Enter fullscreen mode Exit fullscreen mode

Image description

Все, що зберігається в storeValue додається в Local Storage. Якщо відкрити DevTools в браузері, та вибрати Local Storage(він знаходиться в розділі Application), то побачимо дані які додали.

Якщо хочемо, щоб Local Storage не зберігав дані при редіректі на інші сторінки, то в StoreValue третім параметром передаємо false:

storeValue("test_obj", {key: value}, false)
Enter fullscreen mode Exit fullscreen mode

Варто зауважити, коли встановлюється третій параметр, його потрібно використовувати для подальших змін (оновлення значення, видалення), інакше змінна буде недоступною.

Для того, щоб видалити змінну із об'єкту потрібно присвоїти їй значення "undefined"

storeValue("test_obj", undefined, false).

Discussion (0)