Views: 754
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:

  1. Download example pinia (utf8);
  2. Unpack the archive at the address /<installation_path>/local/js/local/;
  3. 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:

  1. Open the terminal;
  2. Go to local extensions folder cd /<installation_path>/local/js/;
  3. 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
    

  4. Refresh the page: now all updates are displayed;
  5. Upon new changes, just repeat the item 4.




Courses developed by Bitrix24