Vue TinyBase

Appearance

Composables ​

Store's composables.

useCell ​

The useCell composable returns a readonly reference to an object containing the value of a single Cell in a given Row, in a given Table, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Cell will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

NOTE

There's a writable alternative to this composable called cellRef

Parameters ​

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

Returns ​

Example ​

vue
<script setup lang="ts">
import { useCell, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const cell = useCell(store, 'pets', 'fido', 'color')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: 'brown'

store.setCell('pets', 'fido', 'color', 'walnut')
// UI will show: 'walnut'
</script>

<template>
  <div>{{ cell }}</div>
</template>
vue
<script setup lang="ts">
import { useCell, injectStore } from 'vue-tinybase'

const store = injectStore()

const cell = useCell('pets', 'fido', 'color')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: 'brown'

store.setCell('pets', 'fido', 'color', 'walnut')
// UI will show: 'walnut'
</script>

<template>
  <div>{{ cell }}</div>
</template>

useCellIds ​

The useCellIds composable returns a readonly reference to the Ids of every Cell in a given Row, in a given Table, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Cell Ids will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<Ids>: A readonly reference to an array of the Ids of every Cell in the Row.

Example ​

vue
<script setup lang="ts">
import { useCellIds, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const cellIds = useCellIds(store, 'table1', 'row1')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: ["color"]

store.setCell('pets', 'fido', 'species', 'dog')
// UI will show: ["color", "species"]
</script>

<template>
  <div>{{ cellIds }}</div>
</template>
vue
<script setup lang="ts">
import { useCellIds, injectStore } from 'vue-tinybase'

const cellIds = useCellIds('table1', 'row1')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: ["color"]

store.setCell('pets', 'fido', 'species', 'dog')
// UI will show: ["color", "species"]
</script>

<template>
  <div>{{ cellIds }}</div>
</template>

useHasCell ​

The useHasCell composable returns a readonly reference to a boolean indicating whether a given Cell exists in a given Row in a given Table, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Cell will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<boolean>: A readonly reference to a boolean indicating whether a Cell with that Id exists in that Row in that Table.

Example ​

vue
<script setup lang="ts">
import { useHasCell, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const hasCell = useHasCell(store, 'pets', 'fido', 'legs')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: false

store.setCell('pets', 'fido', 'legs', 4)
// UI will show: true
</script>

<template>
  <div>{{ hasCell }}</div>
</template>
vue
<script setup lang="ts">
import { useHasCell, injectStore } from 'vue-tinybase'

const store = injectStore()

const hasCell = useHasCell('pets', 'fido', 'legs')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: false

store.setCell('pets', 'fido', 'legs', 4)
// UI will show: true
</script>

<template>
  <div>{{ hasCell }}</div>
</template>

useHasRow ​

The useHasRow composable returns a readonly reference to a boolean indicating whether a given Row exists in the Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Row will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<boolean>: A readonly reference to a boolean indicating whether the Row exists.

Example ​

vue
<script setup lang="ts">
import { useHasRow, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const hasRow = useHasRow(store, 'pets', 'felix')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: false

store.setCell('pets', 'felix', 'color', 'black')
// UI will show: true
</script>

<template>
  <div>{{ hasRow }}</div>
</template>
vue
<script setup lang="ts">
import { useHasRow, injectStore } from 'vue-tinybase'

const store = injectStore()

const hasRow = useHasRow('pets', 'felix')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: false

store.setCell('pets', 'felix', 'color', 'black')
// UI will show: true
</script>

<template>
  <div>{{ hasRow }}</div>
</template>

useHasTable ​

The useHasTable composable returns a readonly reference to a boolean indicating whether a given Table exists in the Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Table will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<boolean>: A readonly reference to a boolean indicating whether the Table exists.

Example ​

vue
<script setup lang="ts">
import { useHasTable, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const hasTable = useHasTable(store, 'pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: true

store.delTable('pets')
// UI will show: false
</script>

<template>
  <div>{{ hasTable }}</div>
</template>
vue
<script setup lang="ts">
import { useHasTable, injectStore } from 'vue-tinybase'

const store = injectStore()

const hasTable = useHasTable('pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: true

store.delTable('pets')
// UI will show: false
</script>

<template>
  <div>{{ hasTable }}</div>
</template>

useHasTableCell ​

The useHasTableCell composable returns a readonly reference to a boolean indicating whether a given Cell exists anywhere in a Table, not just in a specific Row, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Table will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<boolean>: A readonly reference to a boolean indicating whether the Cell exists in the Table.

Example ​

vue
<script setup lang="ts">
import { useHasTableCell, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const hasTableCell = useHasTableCell(store, 'pets', 'legs')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: false

store.setRow('pets', 'felix', { color: 'black', legs: 4 })
// UI will show: true
</script>

<template>
  <div>{{ hasTableCell }}</div>
</template>
vue
<script setup lang="ts">
import { useHasTableCell, injectStore } from 'vue-tinybase'

const store = injectStore()

const hasTableCell = useHasTableCell('pets', 'legs')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: false

store.setRow('pets', 'felix', { color: 'black', legs: 4 })
// UI will show: true
</script>

<template>
  <div>{{ hasTableCell }}</div>
</template>

useHasTables ​

The useHasTables composable returns a readonly reference to a boolean indicating whether any Table objects exist in the Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Tables will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<boolean>: A readonly reference to a boolean indicating whether any Tables exist.

Example ​

vue
<script setup lang="ts">
import { useHasTables, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const hasTables = useHasTables(store)

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: true

store.delTable('pets')
// UI will show: false
</script>

<template>
  <div>{{ hasTables }}</div>
</template>
vue
<script setup lang="ts">
import { useHasTables, injectStore } from 'vue-tinybase'

const store = injectStore()

const hasTables = useHasTables()

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: true

store.delTable('pets')
// UI will show: false
</script>

<template>
  <div>{{ hasTables }}</div>
</template>

useHasValue ​

The useHasValue composable returns a readonly reference to a boolean indicating whether a given Value exists in the Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Value will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<boolean>: A readonly reference to a boolean indicating whether a Value with that Id exists in the Store.

Example ​

vue
<script setup lang="ts">
import { useHasValue, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const hasValue = useHasValue(store, 'employees')

store.setValue('open', true)
// UI will show: false

store.setValue('employees', 3)
// UI will show: true
</script>

<template>
  <div>{{ hasValue }}</div>
</template>
vue
<script setup lang="ts">
import { useHasValue, injectStore } from 'vue-tinybase'

const store = injectStore()

const hasValue = useHasValue('employees')

store.setValue('open', true)
// UI will show: false

store.setValue('employees', 3)
// UI will show: true
</script>

<template>
  <div>{{ hasValue }}</div>
</template>

useHasValues ​

The useHasValues composable returns a readonly reference to a boolean indicating whether any Values exist in the Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Values will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<boolean>: A readonly reference to a boolean indicating whether any Values exist in the Store.

Example ​

vue
<script setup lang="ts">
import { useHasValues, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const hasValues = useHasValues(store)

store.setValue('open', true)
// UI will show: true

store.delValue('open')
// UI will show: false
</script>

<template>
  <div>{{ hasValues }}</div>
</template>
vue
<script setup lang="ts">
import { useHasValues, injectStore } from 'vue-tinybase'

const store = injectStore()

const hasValues = useHasValues()

store.setValue('open', true)
// UI will show: true

store.delValue('open')
// UI will show: false
</script>

<template>
  <div>{{ hasValues }}</div>
</template>

useRow ​

The useRow composable returns a readonly reference to the object containing the data of a single Row in a given Table, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Row will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

NOTE

There's a writable alternative to this composable called rowRef

Parameters ​

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

Returns ​

  • ComputedRef<Row>: A readonly reference to an object containing the entire data of the Row.

Example ​

vue
<script setup lang="ts">
import { useRow, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const row = useRow(store, 'pets', 'fido')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: {"color":"brown"}

store.setCell('pets', 'fido', 'color', 'walnut')
// UI will show: {"color":"walnut"}
</script>

<template>
  <div>{{ row }}</div>
</template>
vue
<script setup lang="ts">
import { useRow, injectStore } from 'vue-tinybase'

const store = injectStore()

const row = useRow('pets', 'fido')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: {"color":"brown"}

store.setCell('pets', 'fido', 'color', 'walnut')
// UI will show: {"color":"walnut"}
</script>

<template>
  <div>{{ row }}</div>
</template>

useRowCount ​

The useRowCount composable returns a readonly reference to the count of the Row objects in a given Table, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the count of Row objects will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<number>: A readonly reference to the number of Row objects in the Table.

Example ​

vue
<script setup lang="ts">
import { useRowCount, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const rowCount = useRowCount(store, 'pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: 1

store.setCell('pets', 'felix', 'color', 'black')
// UI will show: 2
</script>

<template>
  <div>{{ rowCount }}</div>
</template>
vue
<script setup lang="ts">
import { useRowCount, injectStore } from 'vue-tinybase'

const store = injectStore()

const rowCount = useRowCount('pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: 1

store.setCell('pets', 'felix', 'color', 'black')
// UI will show: 2
</script>

<template>
  <div>{{ rowCount }}</div>
</template>

useRowIds ​

The useRowIds composable returns a readonly reference to the Ids of every Row in a given Table, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Row Ids will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<Ids>: A readonly reference to an array of the Ids of every Row in the Table.

Example ​

vue
<script setup lang="ts">
import { useRowIds, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const rowIds = useRowIds(store, 'pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: ["fido"]

store.setCell('pets', 'felix', 'color', 'black')
// UI will show: ["fido", "felix"]
</script>

<template>
  <div>{{ rowIds }}</div>
</template>
vue
<script setup lang="ts">
import { useRowIds, injectStore } from 'vue-tinybase'

const store = injectStore()

const rowIds = useRowIds('pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: ["fido"]

store.setCell('pets', 'felix', 'color', 'black')
// UI will show: ["fido", "felix"]
</script>

<template>
  <div>{{ rowIds }}</div>
</template>

useSortedRowIds ​

The useSortedRowIds composable returns a readonly reference to the sorted (and optionally, paginated) Ids of every Row in a given Table, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the sorted Row Ids will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<Ids>: A readonly reference to an array of the sorted Ids of every Row in the Table.

Example ​

ts
// store
export const store = createStore().setTables({
  pets: {
    fido: { species: 'dog' },
    felix: { species: 'cat' },
  },
})
vue
<script setup lang="ts">
import { useSortedRowIds, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const rowIds = useSortedRowIds('pets', 'species', false, 0, undefined, store)
// UI will show: ["felix", "fido"]

store.setRow('pets', 'cujo', { species: 'wolf' })
// UI will show: ["felix", "fido", "cujo"]
</script>

<template>
  <div>{{ rowIds }}</div>
</template>
vue
<script setup lang="ts">
import { useSortedRowIds, injectStore } from 'vue-tinybase'

const store = injectStore()

const rowIds = useSortedRowIds('pets', 'species', false, 0, undefined)
// UI will show: ["felix", "fido"]

store.setRow('pets', 'cujo', { species: 'wolf' })
// UI will show: ["felix", "fido", "cujo"]
</script>

<template>
  <div>{{ rowIds }}</div>
</template>

useTable ​

The useTable composable returns a readonly reference to an object containing the data of a single Table in a Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Table will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

NOTE

There's a writable alternative to this composable called tableRef

Parameters ​

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

Returns ​

  • ComputedRef<Table>: A readonly reference to an object containing the entire data of the Table.

Example ​

vue
<script setup lang="ts">
import { useTable, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const table = useTable(store, 'pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: {"fido":{"color":"brown"}}

store.setCell('pets', 'fido', 'color', 'walnut')
// UI will show: {"fido":{"color":"walnut"}}
</script>

<template>
  <div>{{ table }}</div>
</template>
vue
<script setup lang="ts">
import { useTable, injectStore } from 'vue-tinybase'

const store = injectStore()

const table = useTable('pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: {"fido":{"color":"brown"}}

store.setCell('pets', 'fido', 'color', 'walnut')
// UI will show: {"fido":{"color":"walnut"}}
</script>

<template>
  <div>{{ table }}</div>
</template>

useTableCellIds ​

The useTableCellIds composable returns a readonly reference to the Ids of every Cell used across the whole Table, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Table Cell Ids will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<Ids>: A readonly reference to an array of the Ids of every Cell used across the whole Table.

Example ​

vue
<script setup lang="ts">
import { useTableCellIds, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const cellIds = useTableCellIds(store, 'pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: ["color"]

store.setCell('pets', 'felix', 'species', 'cat')
// UI will show: ["color", "species"]
</script>

<template>
  <div>{{ cellIds }}</div>
</template>
vue
<script setup lang="ts">
import { useTableCellIds, injectStore } from 'vue-tinybase'

const store = injectStore()

const cellIds = useTableCellIds('pets')

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: ["color"]

store.setCell('pets', 'felix', 'species', 'cat')
// UI will show: ["color", "species"]
</script>

<template>
  <div>{{ cellIds }}</div>
</template>

useTableIds ​

The useTableIds composable returns a readonly reference to the Ids of every Table in a Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Table Ids will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<Ids>: A readonly reference to an array of the Ids of every Table in the Store.

Example ​

vue
<script setup lang="ts">
import { useTableIds, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const tableIds = useTableIds(store)

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: ["pets"]

store.setCell('species', 'dog', 'price', 5)
// UI will show: ["pets", "species"]
</script>

<template>
  <div>{{ tableIds }}</div>
</template>
vue
<script setup lang="ts">
import { useTableIds, injectStore } from 'vue-tinybase'

const store = injectStore()

const tableIds = useTableIds()

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: ["pets"]

store.setCell('species', 'dog', 'price', 5)
// UI will show: ["pets", "species"]
</script>

<template>
  <div>{{ tableIds }}</div>
</template>

useTables ​

The useTables composable returns a readonly reference to a Tables object containing the tabular data of a Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Tables will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

NOTE

There's a writable alternative to this composable called tablesRef

Parameters ​

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

Returns ​

  • ComputedRef<Tables>: A readonly reference to the Tables object containing the tabular data of the Store.

Example ​

vue
<script setup lang="ts">
import { useTables, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const tables = useTables(store)

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: {"pets":{"fido":{"color":"brown"}}}

store.setCell('pets', 'fido', 'color', 'walnut')
// UI will show: {"pets":{"fido":{"color":"walnut"}}}
</script>

<template>
  <div>{{ tables }}</div>
</template>
vue
<script setup lang="ts">
import { useTables, injectStore } from 'vue-tinybase'

const store = injectStore()

const tables = useTables()

store.setCell('pets', 'fido', 'color', 'brown')
// UI will show: {"pets":{"fido":{"color":"brown"}}}

store.setCell('pets', 'fido', 'color', 'walnut')
// UI will show: {"pets":{"fido":{"color":"walnut"}}}
</script>

<template>
  <div>{{ tables }}</div>
</template>

useValue ​

The useValue composable returns a readonly reference to an object containing the data of a single Value in a Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Value will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

NOTE

There's a writable alternative to this composable called valueRef

Parameters ​

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

Returns ​

  • ComputedRef<Value>: A readonly reference to the Value object containing the data of the Store.

Example ​

vue
<script setup lang="ts">
import { useValue, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const value = useValue(store, 'open')

store.setValue('open', true)
// UI will show: true

store.setValue('open', false)
// UI will show: false
</script>

<template>
  <div>{{ value }}</div>
</template>
vue
<script setup lang="ts">
import { useValue, injectStore } from 'vue-tinybase'

const store = injectStore()

const value = useValue('open')

store.setValue('open', true)
// UI will show: true

store.setValue('open', false)
// UI will show: false
</script>

<template>
  <div>{{ value }}</div>
</template>

useValueIds ​

The useValueIds composable returns a readonly reference to the Ids of every Value in a Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Value Ids will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

Parameters ​

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

Returns ​

  • ComputedRef<Ids>: A readonly reference to an array of the Ids of every Value in the Store.

Example ​

vue
<script setup lang="ts">
import { useValueIds, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const valueIds = useValueIds(store)

store.setValue('open', true)
// UI will show: ["open"]

store.setValue('employees', 3)
// UI will show: ["open", "employees"]
</script>

<template>
  <div>{{ valueIds }}</div>
</template>
vue
<script setup lang="ts">
import { useValueIds, injectStore } from 'vue-tinybase'

const store = injectStore()

const valueIds = useValueIds()

store.setValue('open', true)
// UI will show: ["open"]

store.setValue('employees', 3)
// UI will show: ["open", "employees"]
</script>

<template>
  <div>{{ valueIds }}</div>
</template>

useValues ​

The useValues composable returns a readonly reference to a Values object containing the keyed value data of a Store, and registers a listener so that any changes to that result will cause a re-render.

When first accessed, this composable will create a listener so that changes to the Values will cause a re-render. When the component containing this composable is unmounted, the listener will be automatically removed.

NOTE

There's a writable alternative to this composable called valuesRef

Parameters ​

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

Returns ​

  • ComputedRef<Values>: A readonly reference to a Values object containing the keyed value data of the Store.

Example ​

vue
<script setup lang="ts">
import { useValues, injectStore } from 'vue-tinybase/custom-store'

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const values = useValues(store)

store.setValue('open', true)
// UI will show: {"open": true}

store.setValue('employees', 3)
// UI will show: {"open": true, "employees": 3}
</script>

<template>
  <div>{{ values }}</div>
</template>
vue
<script setup lang="ts">
import { useValues, injectStore } from 'vue-tinybase'

const store = injectStore()

const values = useValues()

store.setValue('open', true)
// UI will show: {"open": true}

store.setValue('employees', 3)
// UI will show: {"open": true, "employees": 3}
</script>

<template>
  <div>{{ values }}</div>
</template>