Views: 508
Last Modified: 27.04.2022

We have prepared an example of application with Vuex 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 for vuex (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.vuex");
    ?>
    <div id="application">Application launches after 5 seconds.</div>
    <br>
    <div>
    	<div>Update counter from HTML:</div>
    	<button onclick="store.dispatch('counterStore/increaseCounter')">+1</button>
    	<button onclick="store.dispatch('counterStore/decreaseCounter')">-1</button>
    </div>
    <script type="text/javascript">
    	const application = new BX.VuexDemo('#application');
    	const store = application.getStore();
    
    	setTimeout(() => {
    		BX.Dom.clean();
    		application.start();
    	}, 5000)
    </script>
    
    <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
    

  4. Откройте в браузере эту страницу для просмотра результата:

Application is launched after 5 seconds (to demonstrate storage operation before initializing Vue application).

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:

     ✔ 12:45:55 Build extension local.vuex  js: 6 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