Vue
Composables
useSubscription()
Use this composable to subscribe to a reactive value. Accepts a subscription object directly or a ref/getter that returns one.
Examples
Inline subscription
<script setup lang="ts">
import { createWebStorageValue } from 'seitu/web'
import { useSubscription } from 'seitu/vue'
import * as z from 'zod'
const value = useSubscription(
createWebStorageValue({ type: 'sessionStorage', key: 'test', defaultValue: 0, schema: z.number() }),
)
</script>
<template>
<div>{{ value }}</div>
</template>Instance outside of the subscription
<script setup lang="ts">
import { createWebStorage } from 'seitu/web'
import { useSubscription } from 'seitu/vue'
import * as z from 'zod'
const sessionStorage = createWebStorage({
type: 'sessionStorage',
schemas: { count: z.number(), name: z.string() },
defaultValues: { count: 0, name: '' },
})
const value = useSubscription(sessionStorage)
</script>
<template>
<div>{{ value.count }}</div>
</template>With selector
<script setup lang="ts">
import { createWebStorage } from 'seitu/web'
import { useSubscription } from 'seitu/vue'
import * as z from 'zod'
const sessionStorage = createWebStorage({
type: 'sessionStorage',
schemas: { count: z.number(), name: z.string() },
defaultValues: { count: 0, name: '' },
})
const count = useSubscription(sessionStorage, { selector: v => v.count })
</script>
<template>
<div>{{ count }}</div>
</template>