Bitrix Framework

Pinia was designed to work with several storages in a single application without extra operations.

The example below overviews a modular approach: create two storages and handle them in two different applications simultaneously.

For example, html code has elements with identifiers: application1 and application2. Accordingly, we can verify that data simultaneously will be updated in two applications. First application will show results and the second will change the data.

<div id="application1"></div>
<div id="application2"></div>

In JS extension:

import { BitrixVue } from 'ui.vue3';
import { createPinia, defineStore, mapState, mapActions } from 'ui.vue3.pinia';

const store = createPinia();

const counterStore = defineStore('counter', {
	state: () => ({
		counter: 0
	}),
	getters: {
        double()
        {
            return this.counter * 2;
        },
    },
	actions: {
        increaseCounter()
        {
            this.counter++;
        },
        decreaseCounter()
        {
            this.counter--;
        }
    },
});

const statusStore = defineStore('status', {
	state: () => ({
		lastAction: 'None'
	}),
	actions: {
        setAction(action)
        {
            this.lastAction = action.toString();
        },
    },
});

const Buttons = {
	methods: {
		increase() {
			this.increaseCounter();
			this.setAction('Plus');
		},
		decrease() {
			this.decreaseCounter();
			this.setAction('Minus');
		},
		...mapActions(counterStore, ['increaseCounter', 'decreaseCounter']),
		...mapActions(statusStore, ['setAction']),
	},
	// language=Vue
	template: `
        <button @click="increase">+</button>
        <button @click="decrease">-</button>
    `
};
BitrixVue.createApp({
	components: {
		Buttons
	},
	template: `
        <Buttons/>
    `
}).use(store).mount('#application1');

const Counter = {
	computed: {
        ...mapState(counterStore, ['counter']),
        ...mapState(statusStore, ['lastAction']),
    },
	template: `
        <div>Click counter — {{ counter }}</div>
        <div>Last action — {{ lastAction }}</div>
    `
};

BitrixVue.createApp({
	components: {
		Counter
	},
	template: `<Counter/>`
}).use(store).mount('#application2');