Vue TinyBase

Appearance

References ​

Store's references.

IMPORTANT

The references are not deep-reactive, you have to assign a new value to the reference when you want to update the data.

cellRef ​

The cellRef function returns a writable 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 function will create a listener so that changes to the Cell will cause a re-render. When the component containing this reference is unmounted, the listener will be automatically removed.

NOTE

There's a readonly alternative to this reference called useCell

Parameters ​

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

Returns ​

Example ​

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

import { Store1Key } from './store'

const store = injectStore(Store1Key)

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

cell.value = 'brown'
// UI will show: 'brown'
// same as: store.setCell('pets', 'fido', 'color', 'brown')

cell.value = 'walnut'
// UI will show: 'walnut'
// same as: store.setCell('pets', 'fido', 'color', 'walnut')
</script>

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

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

cell.value = 'brown'
// UI will show: 'brown'
// same as: store.setCell('pets', 'fido', 'color', 'brown')

cell.value = 'walnut'
// UI will show: 'walnut'
// same as: store.setCell('pets', 'fido', 'color', 'walnut')
</script>

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

rowRef ​

The rowRef function returns a writable 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 function will create a listener so that changes to the Row will cause a re-render. When the component containing this reference is unmounted, the listener will be automatically removed.

NOTE

There's a readonly alternative to this reference called useRow

Parameters ​

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

Returns ​

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

Example ​

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

import { Store1Key } from './store'

const store = injectStore(Store1Key)

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

row.value = { color: 'brown' }
// UI will show: {"color":"brown"}
// same as: store.setRow('pets', 'fido', { color: 'brown' })

row.value = { color: 'walnut' }
// UI will show: {"color":"walnut"}
// same as: store.setRow('pets', 'fido', { color: 'walnut' })
</script>

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

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

row.value = { color: 'brown' }
// UI will show: {"color":"brown"}
// same as: store.setRow('pets', 'fido', { color: 'brown' })

row.value = { color: 'walnut' }
// UI will show: {"color":"walnut"}
// same as: store.setRow('pets', 'fido', { color: 'walnut' })
</script>

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

tableRef ​

The tableRef function returns a writable 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 function will create a listener so that changes to the Table will cause a re-render. When the component containing this reference is unmounted, the listener will be automatically removed.

NOTE

There's a readonly alternative to this reference called useTable

Parameters ​

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

Returns ​

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

Example ​

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

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const table = tableRef(store, 'pets')

table.value = { fido: { color: 'brown' } }
// UI will show: {"fido":{"color":"brown"}}
// same as: store.setTable('pets', { fido: { color: 'brown' } })

table.value = { fido: { color: 'walnut' } }
// UI will show: {"fido":{"color":"walnut"}}
// same as: store.setTable('pets', { fido: { color: 'walnut' } })
</script>

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

const table = useTable('pets')

table.value = { fido: { color: 'brown' } }
// UI will show: {"fido":{"color":"brown"}}
// same as: store.setTable('pets', { fido: { color: 'brown' } })

table.value = { fido: { color: 'walnut' } }
// UI will show: {"fido":{"color":"walnut"}}
// same as: store.setTable('pets', { fido: { color: 'walnut' } })
</script>

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

tablesRef ​

The tablesRef function returns a writable 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 function will create a listener so that changes to the Tables will cause a re-render. When the component containing this reference is unmounted, the listener will be automatically removed.

NOTE

There's a readonly alternative to this function called useTables

Parameters ​

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

Returns ​

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

Example ​

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

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const tables = tablesRef(store)

tables.value = { pets: { fido: { color: 'brown' } } }
// UI will show: {"pets":{"fido":{"color":"brown"}}}
// same as: store.setTables({ pets: { fido: { color: 'brown' } })

tables.value = { pets: { fido: { color: 'walnut' } } }
// UI will show: {"pets":{"fido":{"color":"walnut"}}}
// same as: store.setTables({ pets: { fido: { color: 'walnut' } })
</script>

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

const tables = tablesRef()

tables.value = { pets: { fido: { color: 'brown' } } }
// UI will show: {"pets":{"fido":{"color":"brown"}}}
// same as: store.setTables({ pets: { fido: { color: 'brown' } })

tables.value = { pets: { fido: { color: 'walnut' } } }
// UI will show: {"pets":{"fido":{"color":"walnut"}}}
// same as: store.setTables({ pets: { fido: { color: 'walnut' } })
</script>

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

valueRef ​

The valueRef function returns a writable 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 function will create a listener so that changes to the Value will cause a re-render. When the component containing this reference is unmounted, the listener will be automatically removed.

NOTE

There's a writable alternative to this function called useValue

Parameters ​

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

Returns ​

  • WritableComputedRef<Value>: A writable reference to the Value object containing the data of the Store.

Example ​

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

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const value = valueRef(store, 'open')

value.value = true
// UI will show: true
// same as: store.setValue('open', true)

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

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

const value = valueRef('open')

value.value = true
// UI will show: true
// same as: store.setValue('open', true)

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

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

valuesRef ​

The valuesRef function returns a writable 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 function will create a listener so that changes to the Values will cause a re-render. When the component containing this reference is unmounted, the listener will be automatically removed.

NOTE

There's a readonly alternative to this function called useValues

Parameters ​

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

Returns ​

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

Example ​

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

import { Store1Key } from './store'

const store = injectStore(Store1Key)

const values = valuesRef(store)

values.value = { open: true }
// UI will show: {"open": true}
// same as: store.setValues({ open: true })

values.value = { open: true, employees: 3 }
// UI will show: {"open": true, "employees": 3}
// same as: store.setValues({ open: true, employees: 3 })
</script>

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

const values = valuesRef()

values.value = { open: true }
// UI will show: {"open": true}
// same as: store.setValues({ open: true })

values.value = { open: true, employees: 3 }
// UI will show: {"open": true, "employees": 3}
// same as: store.setValues({ open: true, employees: 3 })
</script>

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