Bitrix Framework

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");?>
   

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.