Views: 2889
Last Modified: 10.10.2024
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:
- Download example for vuex (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.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:
- 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:
✔ 12:45:55 Build extension local.vuex js: 6 KB, css: 64 B
- Refresh the page: now all updates are displayed;
- Upon new changes, just repeat the item 4.