Bitrix Framework

  Class $Bitrix.Data

Class allows to save arbitrary data in the context of Vue application and retrieve them from the component of any nesting level.

This class is not a replacement for reactive variables from objects props and data, as well as to Provide/Inject approach. It allows to organize interaction between components without complex sync system.

$Bitrix.Data.set

Method to save data.

this.$Bitrix.Data.set(name: string, value: any): void

Parameters:

$Bitrix.Data.get

Method to get data.

this.$Bitrix.Data.get(name: string, defaultValue?:any): any

Parameters:

Result:

When data with the key name won't be found, returns their value. Otherwise, function returns defaultValue.

  Example

For example, we want to implement an audioplayer feature. When several player components are located at the page, we need to start the playback of the record when audio record ends.

This can be done as follows:

import {BitrixVue} from 'ui.vue3';

const AudioPlayer = {
	...
	registerPlayer(id): void
	{
		let registry = this.$Bitrix.Data.get('ui-audioplayer-id', []);

		registry = [...new Set([...registry, id])]
			.filter(id => id !== this.registeredId)
			.sort((a, b) => a - b)
		;

		this.$Bitrix.Data.set('ui-audioplayer-id', registry);
		
		this.registeredId = id;
	},
	unregisterPlayer(): void
	{
		const registry = this.$Bitrix.Data.get('ui-audioplayer-id', []).filter(id => id !== this.registeredId);

		this.$Bitrix.Data.set('ui-audioplayer-id', registry);

		this.registeredId = 0;
	},
	playNext(): boolean
	{
		const nextId = this.$Bitrix.Data.get('ui-audioplayer-id', []).filter(id => id > this.registeredId).slice(0, 1)[0];
		if (nextId)
		{
			this.$Bitrix.eventEmitter.emit('ui:audioplayer:play', {id: nextId, start: true});
		}

		return true;
	}
	...
});

Full example can be viewed in the component bx-audioplayer, located in the file Available from version ui 22.100.0. /bitrix/modules/ui/install/js/ui/vue3/components/audioplayer/src/audioplayer.js.

Access to functions inside the component is performed in the same manner as to any other variable - via this.. There are, however, nuances of use in the hook beforeCreate. You can find more details in the chapter description.