Example of application with Pinia storage

We have prepared an example of application with Pinia storage shown below:

application loader;
two storages with mutual interaction;
root component.

The following steps are performed for launching a demo app:

Download example pinia (utf8);
Unpack the archive at the address /<installation_path>/local/js/local/;

Create public page and connect the extension:

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
?>

<?
\Bitrix\Main\UI\Extension::load("local.pinia");
?>

<div id="application">Application launches after 5 seconds.</div>
<br>
<div>
	<div>Update counter from HTML:</div>
	<button onclick="counterStore().increaseCounter()">+1</button>
	<button onclick="counterStore().decreaseCounter()">-1</button>
</div>
<script type="text/javascript">
	const application = new BX.PiniaDemo('#application');

	application.initStorageBeforeStartApplication();
	const counterStore = application.getCounterStore();

	setTimeout(() => {
		BX.Dom.clean();
		application.start();
	}, 5000)
</script>

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Application is launched after 5 seconds (to demonstrate storage operation before initializing Vue application). To use the storage, activate Pinia storage:

application.initStorageBeforeStartApplication()
{
   setActivePinia(this.#store);
}

When you want to edit the component and add your own logic, don't forget to launch the transpiler:

Open the terminal;
Go to local extensions folder cd /<installation_path>/local/js/;
Launch the transpiler in the change track mode bitrix build -w. You'll see the following text upon launch:
```
 ✔ 13:33:38 Build extension local.pinia  js: 5 KB, css: 64 B
```
Refresh the page: now all updates are displayed;
Upon new changes, just repeat the item 4.

Bitrix Framework