Bitrix Framework

  Connecting and launch

To start working, first connect the extension ui.vue3.vuex in your extension or at the php-enabled page.

Import createStore from ui.vue3.vuex in your extension, create a storage and connect it via .use():

import {createStore} from 'ui.vue3.vuex';
import {BitrixVue} from 'ui.vue3';

const store = createStore({
	...
});

const application = BitrixVue.createApp({
    components: {
		Component
    },
	template: '<Component/>'
});
application.use(store);
application.mount('#application');

Use the namespace BX.Vue3.Vuex for function access and handling the page and scripts without transpiling (for example, for createStore its BX.Vue3.Vuex.createStore).

  Example

Let's overview example of interaction. Place an element with identifier application in your html page:

<div id="application"></div>

Execute the following code in JS extension for associating html, Vue and Vuex (it creates a storage, registers component to handle the extension and launches Vue application):

import {createStore} from 'ui.vue3.vuex';
import {BitrixVue} from 'ui.vue3';

const counterStore = {
	state()
	{
		return {
			counter: 0
		}
	},
	actions: {
        increaseCounter: (store) => {
            store.commit('increaseCounter', {count: 1});
        },
        decreaseCounter: (store) => {
            store.commit('increaseCounter', {count: -1});
        }
    },
	mutations: {
        increaseCounter: (state, payload = {}) => {
            let {count = 1} = payload;

            state.counter += count;
        }
    }
};

const store = createStore(counterStore);

const Component = {
	data()
	{
		return {
			clicks: 0
		}
	},
	computed: {
		counter()
		{
			return `Quantity: ${this.$store.state.counter}`;
		}
	},
	methods: {
		increase()
		{
			this.clicks += 1;

			this.$store.dispatch('increaseCounter').then(() => {
				console.log('+');
			});
		},
		decrease()
		{
			this.clicks += 1;

			this.$store.dispatch('decreaseCounter').then(() => {
				console.log('-');
			});
		}
	},
	// language=Vue
	template: `
        {{counter}}
        <button @click="increase">+</button>
        <button @click="decrease">-</button>
        (нажатий: {{clicks}})
    `
};

const Application = BitrixVue.createApp({
	components: {
		Component
	},
	template: `
        <Component/>
    `
})
Application.use(store);
Application.mount('#application');