Интеграция с Dexie

В рамках поставки модуля ui есть расширение ui.dexie, позволяющее удобно взаимодействовать с локальной базой данных IndexedDB.

Начиная с версии ui 22.500.0 Вы можете воспользоваться встроенной интеграцией Dexie с Vue 3.

Подробнее о библиотеке читайте на официальном сайте.

Подключение

Для начала работы подключите расширения ui.dexie и ui.vue3 в Вашем экстеншне или на php-странице.

В расширение импортируйте liveQuery из ui.dexie и useObservable из ui.vue3.

Для работы в рамках страницы и в скриптах без транспиляции используйте неймспейсы BX.Dexie3 и BX.Vue3 для доступа к функциям (например, для liveQuery это BX.Dexie3.liveQuery).

  Пример

В примере ниже Vue приложение отображает содержимое локальной базы данных.

В переменной items будут реактивно храниться все элементы таблицы items, в которых имя начинается на английскую букву "A".

import {BitrixVue, useObservable} from 'ui.vue3';
import {Dexie, liveQuery} from 'ui.dexie';

const db = new Dexie("vuedbsample");
db.version(1).stores({
	items: "++id, name"
});

const DBItems = {
	data() {
		return {
			db,
			items: useObservable(
				liveQuery(() => db.items.where("name").startsWithAnyOf("A", "a").sortBy('id'))
			),
		}
	},
	methods: {
		addUser()
		{
			const name = prompt('Specify the element starting with the letter "A":')
			this.db.items.add({ name });
		},
		clear()
		{
			this.db.items.clear();
		}
	},
	template: `
		<h2>Dexie integration (IndexedDB)</h2>

		<!-- Mutation examples -->
		<button @click="addUser">Add item</button>
		<button @click="clear">Clear items</button>
		
		<!-- Render the result of the query -->
		<ul>
		  <li v-for="item in items" :key="item.id">
			{{ item.id }}, {{ item.name }}
		  </li>
		</ul>
	`
};

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