Views: 3377
Last Modified: 15.02.2023
Inetgration with Dexie
The UI module contains the extension ui.dexie
, allowing to interact with local IndexedDB database.
Starting from version ui 22.500.0 you can use the Dexie integration with Vue 3.
You can learn more about this library at the official website.
Establishing a connection
Connect the extensions ui.dexie
and ui.vue3
in your extension or at a PHP page.
Import into the extension the liveQuery
from ui.dexie
and useObservable
from ui.vue3
respectively.
To work within a page and in scripts without compiling, use the namespaces BX.Dexie3
and BX.Vue3
for access to functions (for example, for liveQuery
its BX.Dexie3.liveQuery
).
Example
In the example below, the Vue application shows the content of local database.
The variable items
will actively store all items of the items
table, with names starting with an English letter "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');