Views: 3731
Last Modified: 27.04.2022
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.