Vue TinyBase

Appearance

Events ​

Store's event hooks.

onCellChange ​

The onCellChange event hook registers a listener function with a Store that will be called whenever data in a Cell changes.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useCell composable).

You can either listen to a single Cell (by specifying the Table Id, Row Id, and Cell Id as the first three parameters) or changes to any Cell (by providing null wildcards).

All, some, or none of the tableId, rowId, and cellId parameters can be wildcarded with null. You can listen to a specific Cell in a specific Row in a specific Table, any Cell in any Row in any Table, for example - or every other combination of wildcards.

Unlike the addCellListener method, which returns a listener Id and requires you to remove it manually, the onCellChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onCellChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onCellChange, injectStore } from 'vue-tinybase'

onCellChange('pets', 'fido', 'color', () => {
  console.log('Cell changed')
})

const store = injectStore()

store.setCell('pets', 'fido', 'color', 'brown')
// -> 'Cell changed'
</script>
vue
<script setup lang="ts">
import { onCellChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onCellChange(store, 'pets', 'fido', 'color', () => {
  console.log('Store 1 Cell changed')
})

store.setCell('pets', 'fido', 'color', 'brown')
// -> 'Store 1 Cell changed'
</script>

onCellIdsChange ​

The onCellIdsChange event hook registers a listener function with a Store that will be called whenever the Cell Ids in a Row change.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useCellIds composable).

You can either listen to a single Row (by specifying the Table Id and Row Id as the first two parameters) or changes to any Row (by providing null wildcards).

Both, either, or neither of the tableId and rowId parameters can be wildcarded with null. You can listen to a specific Row in a specific Table, any Row in a specific Table, a specific Row in any Table, or any Row in any Table.

Unlike the addCellIdsListener method, which returns a listener Id and requires you to remove it manually, the onCellIdsChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onCellIdsChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onCellIdsChange, injectStore } from 'vue-tinybase'

onCellIdsChange('pets', 'fido', () => {
  console.log('Cell Ids changed')
})

const store = injectStore()

store.setCell('pets', 'fido', 'species', 'dog')
// -> 'Cell Ids changed'
</script>
vue
<script setup lang="ts">
import { onCellIdsChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onCellIdsChange(store, 'pets', 'fido', () => {
  console.log('Store 1 Cell Ids changed')
})

store.setCell('pets', 'fido', 'species', 'dog')
// -> 'Store 1 Cell Ids changed'
</script>

onDidFinishTransaction ​

The onDidFinishTransaction event hook registers a listener function with a Store that will be called just after other non-mutating listeners are called at the end of the transaction.

Unlike the addDidFinishTransactionListener method, which returns a listener Id and requires you to remove it manually, the onDidFinishTransaction event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onDidFinishTransaction event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onDidFinishTransaction, injectStore } from 'vue-tinybase'

onDidFinishTransaction(() => {
  console.log('Transaction finished')
})

const store = injectStore()

store.setValue('open', false)
// -> 'Transaction finished'
</script>
vue
<script setup lang="ts">
import { onDidFinishTransaction, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onDidFinishTransaction(store, () => {
  console.log('Store 1 Transaction finished')
})

store.setValue('open', false)
// -> 'Store 1 Transaction finished'
</script>

onHasCellChange ​

The onHasCellChange event hook registers a listener function with a Store that will be called when a Cell is added to or removed from the Store.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the existence of a cell (which is more easily done with the useHasCell composable).

You can either listen to a single Cell being added or removed (by specifying the Table Id, Row Id, and Cell Id as the first three parameters) or changes to any Cell (by providing null wildcards).

All, some, or none of the tableId, rowId, and cellId parameters can be wildcarded with null. You can listen to a specific Cell in a specific Row in a specific Table, any Cell in any Row in any Table, for example - or every other combination of wildcards.

Unlike the addHasCellListener method, which returns a listener Id and requires you to remove it manually, the onHasCellChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onHasCellChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onHasCellChange, injectStore } from 'vue-tinybase'

onHasCellChange('pets', 'fido', 'color', () => {
  console.log('Cell existence changed')
})

const store = injectStore()

store.setCell('pets', 'fido', 'color', 'brown')
// -> 'Cell existence changed'
</script>
vue
<script setup lang="ts">
import { onHasCellChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onHasCellChange(store, 'pets', 'fido', 'color', () => {
  console.log('Store 1 Cell existence changed')
})

store.setCell('pets', 'fido', 'color', 'brown')
// -> 'Store 1 Cell existence changed'
</script>

onHasRowChange ​

The onHasRowChange event hook registers a listener function with a Store that will be called when a Row is added to or removed from the Store.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useHasRow composable).

You can either listen to a single Row being added or removed (by specifying the Table Id and Row Id as the first two parameters) or changes to any Row (by providing null wildcards).

All, some, or none of the tableId and rowId parameters can be wildcarded with null. You can listen to a specific Row in a specific Table, any Row in a specific Table, a specific Row in any Table, or any Row in any Table.

Unlike the addHasRowListener method, which returns a listener Id and requires you to remove it manually, the onHasRowChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onHasRowChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onHasRowChange, injectStore } from 'vue-tinybase'

onHasRowChange('pets', 'fido', () => {
  console.log('Row existence changed')
})

const store = injectStore()

store.setCell('pets', 'fido', 'color', 'walnut')
// -> 'Row existence changed'
</script>
vue
<script setup lang="ts">
import { onHasRowChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onHasRowChange(store, 'pets', 'fido', () => {
  console.log('Store 1 Row existence changed')
})

store.setCell('pets', 'fido', 'color', 'walnut')
// -> 'Store 1 Row existence changed'
</script>

onHasTableCellChange ​

The onHasTableCellChange event hook registers a listener function with a Store that will be called when a Cell is added to or removed from anywhere in a Table as a whole.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useHasTableCell composable).

You can either listen to a single Cell being added or removed (by specifying the Table Id and Cell Id as the first two parameters) or changes to any Cell (by providing null wildcards).

All, some, or none of the tableId and cellId parameters can be wildcarded with null. You can listen to a specific Cell in a specific Table, any Cell in a specific Table, a specific Cell in any Table, or any Cell in any Table.

Unlike the addHasTableCellListener method, which returns a listener Id and requires you to remove it manually, the onHasTableCellChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onHasTableCellChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onHasTableCellChange, injectStore } from 'vue-tinybase'

onHasTableCellChange('pets', 'color', () => {
  console.log('Table Cell existence changed')
})

const store = injectStore()

store.setRow('pets', 'fido', { color: 'brown' })
// -> 'Table Cell existence changed'
</script>
vue
<script setup lang="ts">
import { onHasTableCellChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onHasTableCellChange(store, 'pets', 'color', () => {
  console.log('Store 1 Table Cell existence changed')
})

store.setRow('pets', 'fido', { color: 'brown' })
// -> 'Store 1 Table Cell existence changed'
</script>

onHasTableChange ​

The onHasTableChange event hook registers a listener function with a Store that will be called when a Table is added to or removed from the Store.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useHasTable composable).

You can either listen to a single Table being added or removed (by specifying the Table Id as the first parameter) or changes to any Table (by providing a null wildcard).

All, some, or none of the tableId parameters can be wildcarded with null. You can listen to a specific Table, any Table, or every other combination of wildcards.

Unlike the addHasTableListener method, which returns a listener Id and requires you to remove it manually, the onHasTableChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onHasTableChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onHasTableChange, injectStore } from 'vue-tinybase'

onHasTableChange('pets', () => {
  console.log('Table existence changed')
})

const store = injectStore()

store.setCell('pets', 'fido', 'color', 'brown')
// -> 'Table existence changed'
</script>
vue
<script setup lang="ts">
import { onHasTableChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onHasTableChange(store, 'pets', () => {
  console.log('Store 1 Table existence changed')
})

store.setCell('pets', 'fido', 'color', 'brown')
// -> 'Store 1 Table existence changed'
</script>

onHasTablesChange ​

The onHasTablesChange event hook registers a listener function with a Store that will be called when Tables as a whole are added to or removed from the Store.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useHasTables composable).

Unlike the addHasTablesListener method, which returns a listener Id and requires you to remove it manually, the onHasTablesChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onHasTablesChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onHasTablesChange, injectStore } from 'vue-tinybase'

onHasTablesChange(() => {
  console.log('Tables existence changed')
})

const store = injectStore()

store.setCell('pets', 'fido', 'color', 'brown')
// -> 'Tables existence changed'
</script>
vue
<script setup lang="ts">
import { onHasTablesChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onHasTablesChange(store, () => {
  console.log('Store 1 Tables existence changed')
})

store.setCell('pets', 'fido', 'color', 'brown')
// -> 'Store 1 Tables existence changed'
</script>

onHasValueChange ​

The onHasValueChange event hook registers a listener function with a Store that will be called when a Value is added to or removed from the Store.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useHasValue composable).

You can either listen to a single Value being added or removed (by specifying the Value Id) or any Value being added or removed (by providing a null wildcard).

Unlike the addHasValueListener method, which returns a listener Id and requires you to remove it manually, the onHasValueChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onHasValueChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onHasValueChange, injectStore } from 'vue-tinybase'

onHasValueChange('open', () => {
  console.log('Value existence changed')
})

const store = injectStore()

store.setValue('open', false)
// -> 'Value existence changed'
</script>
vue
<script setup lang="ts">
import { onHasValueChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onHasValueChange(store, 'open', () => {
  console.log('Store 1 Value existence changed')
})

store.setValue('open', false)
// -> 'Store 1 Value existence changed'
</script>

onHasValuesChange ​

The onHasValuesChange event hook registers a listener function with a Store that will be called when Values as a whole are added to or removed from the Store.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the values (which is more easily done with the useHasValues composable).

Unlike the addHasValuesListener method, which returns a listener Id and requires you to remove it manually, the onHasValuesChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onHasValuesChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onHasValuesChange, injectStore } from 'vue-tinybase'

onHasValuesChange(() => {
  console.log('Values existence changed')
})

const store = injectStore()

store.setValue('open', true)
// -> 'Values existence changed'
</script>
vue
<script setup lang="ts">
import { onHasValuesChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onHasValuesChange(store, () => {
  console.log('Store 1 Values existence changed')
})

store.setValue('open', true)
// -> 'Store 1 Values existence changed'
</script>

onRowChange ​

The onRowChange event hook registers a listener function with a Store that will be called whenever data in a Row changes.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the row value (which is more easily done with the useRow composable).

Unlike the addRowListener method, which returns a listener Id and requires you to remove it manually, the onRowChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onRowChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onRowChange, injectStore } from 'vue-tinybase'

onRowChange('pets', 'fido', () => {
  console.log('Row changed')
})

const store = injectStore()

store.setCell('pets', 'fido', 'color', 'walnut')
// -> 'Row changed'
</script>
vue
<script setup lang="ts">
import { onRowChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onRowChange(store, 'pets', 'fido', () => {
  console.log('Store 1 Row changed')
})

store.setCell('pets', 'fido', 'color', 'walnut')
// -> 'Store 1 Row changed'
</script>

onRowCountChange ​

The onRowCountChange event hook registers a listener function with a Store that will be called whenever the count of the Row objects in a Table changes.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the row count (which is more easily done with the useRowCount composable).

Unlike the addRowCountListener method, which returns a listener Id and requires you to remove it manually, the onRowCountChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onRowCountChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onRowCountChange, injectStore } from 'vue-tinybase'

onRowCountChange('pets', () => {
  console.log('Row count changed')
})

const store = injectStore()

store.setRow('pets', 'felix', { color: 'black' })
// -> 'Row count changed'
</script>
vue
<script setup lang="ts">
import { onRowCountChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onRowCountChange(store, 'pets', () => {
  console.log('Store 1 Row count changed')
})

store.setRow('pets', 'felix', { color: 'black' })
// -> 'Store 1 Row count changed'
</script>

onRowIdsChange ​

The onRowIdsChange event hook registers a listener function with a Store that will be called whenever the Row Ids in a Table change.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the row Ids (which is more easily done with the useRowIds composable).

Unlike the addRowIdsListener method, which returns a listener Id and requires you to remove it manually, the onRowIdsChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onRowIdsChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onRowIdsChange, injectStore } from 'vue-tinybase'

onRowIdsChange('pets', () => {
  console.log('Row Ids changed')
})

const store = injectStore()

store.setRow('pets', 'felix', { color: 'black' })
// -> 'Row Ids changed'
</script>
vue
<script setup lang="ts">
import { onRowIdsChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onRowIdsChange(store, 'pets', () => {
  console.log('Store 1 Row Ids changed')
})

store.setRow('pets', 'felix', { color: 'black' })
// -> 'Store 1 Row Ids changed'
</script>

onSortedRowIdsChange ​

The onSortedRowIdsChange event hook registers a listener function with a Store that will be called whenever sorted (and optionally, paginated) Row Ids in a Table change.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the sorted row IDs (which is more easily done with the useSortedRowIds composable).

Unlike the addSortedRowIdsListener method, which returns a listener Id and requires you to remove it manually, the onSortedRowIdsChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onSortedRowIdsChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onSortedRowIdsChange, injectStore } from 'vue-tinybase'

onSortedRowIdsChange('pets', 'species', false, 0, undefined, () => {
  console.log('Sorted Row Ids changed')
})

const store = injectStore()

store.setRow('pets', 'cujo', { species: 'wolf' })
// -> 'Sorted Row Ids changed'
</script>
vue
<script setup lang="ts">
import { onSortedRowIdsChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onSortedRowIdsChange(store, 'pets', 'species', false, 0, undefined, () => {
  console.log('Store 1 Sorted Row Ids changed')
})

store.setRow('pets', 'cujo', { species: 'wolf' })
// -> 'Store 1 Sorted Row Ids changed'
</script>

onStartTransaction ​

The onStartTransaction event hook registers a listener function with the Store that will be called at the start of a transaction.

Unlike the addStartTransactionListener method, which returns a listener Id and requires you to remove it manually, the onStartTransaction event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onStartTransaction event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onStartTransaction, injectStore } from 'vue-tinybase'

onStartTransaction(() => {
  console.log('Start transaction')
})

const store = injectStore()

store.setValue('open', false)
// -> 'Start transaction'
</script>
vue
<script setup lang="ts">
import { onStartTransaction, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onStartTransaction(store, () => {
  console.log('Store 1 Start transaction')
})

store.setValue('open', false)
// -> 'Store 1 Start transaction'
</script>

onTableCellIdsChange ​

The onTableCellIdsChange event hook registers a listener function with the Store that will be called whenever the Cell Ids that appear anywhere in a Table change.

Unlike the addTableCellIdsListener method, which returns a listener Id and requires you to remove it manually, the onTableCellIdsChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onTableCellIdsChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onTableCellIdsChange, injectStore } from 'vue-tinybase'

onTableCellIdsChange('pets', () => {
  console.log('Cell Ids changed')
})

const store = injectStore()

store.setTables({
  pets: { fido: { color: 'brown' } },
})
// -> 'Cell Ids changed'
</script>
vue
<script setup lang="ts">
import { onTableCellIdsChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onTableCellIdsChange(store, 'pets', () => {
  console.log('Store 1 Cell Ids changed')
})

store.setTables({
  pets: { fido: { color: 'brown' } },
})
// -> 'Store 1 Cell Ids changed'
</script>

onTableChange ​

The onTableChange event hook registers a listener function with a Store that will be called whenever data in a Table changes.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useTable composable).

You can either listen to a single Table (by specifying its Id as the first parameter) or changes to any Table (by providing a null wildcard).

Unlike the addTableListener method, which returns a listener Id and requires you to remove it manually, the onTableChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onTableChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onTableChange, injectStore } from 'vue-tinybase'

onTableChange('pets', () => {
  console.log('Table changed')
})

const store = injectStore()

store.setTable('pets', { fido: { color: 'brown' } })
// -> 'Table changed'
</script>
vue
<script setup lang="ts">
import { onTableChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onTableChange(store, 'pets', () => {
  console.log('Store 1 Table changed')
})

store.setTable('pets', { fido: { color: 'brown' } })
// -> 'Store 1 Table changed'
</script>

onTableIdsChange ​

The onTableIdsChange event hook registers a listener function with a Store that will be called whenever the Table Ids in it change.

Unlike the addTableIdsListener method, which returns a listener Id and requires you to remove it manually, the onTableIdsChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onTableIdsChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onTableIdsChange, injectStore } from 'vue-tinybase'

onTableIdsChange(() => {
  console.log('Table Ids changed')
})

const store = injectStore()

store.setTable('pets', { fido: { color: 'brown' } })
// -> 'Table Ids changed'
</script>
vue
<script setup lang="ts">
import { onTableIdsChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onTableIdsChange(store, () => {
  console.log('Store 1 Table Ids changed')
})

store.setTable('pets', { fido: { color: 'brown' } })
// -> 'Store 1 Table Ids changed'
</script>

onTablesChange ​

The onTablesChange event hook registers a listener function with a Store that will be called whenever tabular data in it changes.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useTables composable).

Unlike the addTablesListener method, which returns a listener Id and requires you to remove it manually, the onTablesChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onTablesChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onTablesChange, injectStore } from 'vue-tinybase'

onTablesChange(() => {
  console.log('Tables changed')
})

const store = injectStore()

store.setTable('pets', { fido: { color: 'brown' } })
// -> 'Tables changed'
</script>
vue
<script setup lang="ts">
import { onTablesChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onTablesChange(store, () => {
  console.log('Store 1 Tables changed')
})

store.setTable('pets', { fido: { color: 'brown' } })
// -> 'Store 1 Tables changed'
</script>

onValueChange ​

The onValueChange event hook registers a listener function with a Store that will be called whenever data in a Value changes.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useValue composable).

You can either listen to a single Value (by specifying its Id as the first parameter) or changes to any Value (by providing a null wildcard).

Unlike the addValueListener method, which returns a listener Id and requires you to remove it manually, the onValueChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onValueChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onValueChange, injectStore } from 'vue-tinybase'

onValueChange('open', () => {
  console.log('Value changed')
})

const store = injectStore()

store.setValues({ open: true })
// -> 'Value changed'
</script>
vue
<script setup lang="ts">
import { onValueChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onValueChange(store, 'open', () => {
  console.log('Store 1 Value changed')
})

store.setValues({ open: true })
// -> 'Store 1 Value changed'
</script>

onValueIdsChange ​

The onValueIdsChange event hook registers a listener function with a Store that will be called whenever the Value Ids in it change.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useValueIds composable).

Unlike the addValueIdsListener method, which returns a listener Id and requires you to remove it manually, the onValueIdsChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onValueIdsChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onValueIdsChange, injectStore } from 'vue-tinybase'

onValueIdsChange(() => {
  console.log('Value Ids changed')
})

const store = injectStore()

store.setValues({ open: true })
// -> 'Value Ids changed'
</script>
vue
<script setup lang="ts">
import { onValueIdsChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onValueIdsChange(store, () => {
  console.log('Store 1 Value Ids changed')
})

store.setValues({ open: true })
// -> 'Store 1 Value Ids changed'
</script>

onValuesChange ​

The onValuesChange event hook registers a listener function with a Store that will be called whenever keyed data in it changes.

This event hook is useful for situations where a component needs to register its own specific listener to do more than simply tracking the value (which is more easily done with the useValues composable).

Unlike the addValuesListener method, which returns a listener Id and requires you to remove it manually, the onValuesChange event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onValuesChange event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onValuesChange, injectStore } from 'vue-tinybase'

onValuesChange(() => {
  console.log('Values changed')
})

const store = injectStore()

store.setValue('open', false)
// -> 'Values changed'
</script>
vue
<script setup lang="ts">
import { onValuesChange, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onValuesChange(store, () => {
  console.log('Store 1 Values changed')
})

store.setValue('open', false)
// -> 'Store 1 Values changed'
</script>

onWillFinishTransaction ​

The onWillFinishTransaction event hook registers a listener function with the Store that will be called just before other non-mutating listeners are called at the end of the transaction.

Unlike the addWillFinishTransactionListener method, which returns a listener Id and requires you to remove it manually, the onWillFinishTransaction event hook manages this lifecycle for you: when the component unmounts, the listener on the underlying Store will be deleted.

Parameters ​

  • store (Store): The store to listen to.
  • listener (TransactionListener): The function that will be called just before other non-mutating listeners are called at the end of the transaction.
  • options? (UseListenerOptions): Options for the listener.

Returns ​

The same as the useListener composable.

Example ​

This example uses the onWillFinishTransaction event hook to create a listener that is scoped to a single component. When the component is unmounted, the listener is removed from the Store.

vue
<script setup lang="ts">
import { onWillFinishTransaction, injectStore } from 'vue-tinybase'

onWillFinishTransaction(() => {
  console.log('Will finish transaction')
})

const store = injectStore()

store.setValue('open', false)
// -> 'Will finish transaction'
</script>
vue
<script setup lang="ts">
import { onWillFinishTransaction, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

onWillFinishTransaction(store, () => {
  console.log('Store 1 Will finish transaction')
})

store.setValue('open', false)
// -> 'Store 1 Will finish transaction'
</script>