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

    <div id="application">Application launches after 5 seconds.</div>
    	<div>Update counter from HTML:</div>
    	<button onclick="store.dispatch('counterStore/increaseCounter')">+1</button>
    	<button onclick="store.dispatch('counterStore/decreaseCounter')">-1</button>
    <script type="text/javascript">
    	const application = new BX.VuexDemo('#application');
    	const store = application.getStore();
    	setTimeout(() => {
    	}, 5000)

  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