Shared state
Updated on August 22, 2024
Baleada Prose components use a Pinia store to share some state that you might find useful:
- A list of metadata for all currently rendered
BaleadaProseHeadingcomponents. You can use this to build a reactive table of contents. - A list of metadata for all currently rendered
BaleadaProseMediacomponents. You can use this to build a reactive media carousel for an article.
To support those use cases, Baleada Prose exports a useStore composable that you can use to access this data:
import { useStore } from '@baleada/vue-prose'
// Like all Pinia stores, the `useStore` function returns
// a reactive object with shared state.
const store = useStore()
// There are a few other things in this store, but
// `headings` and `media` are the useful ones.
store.headings // -> Array of heading metadata
store.media // -> Array of media metadata
Each item in store.headings has the following structure:
Property
Type
Description
levelNumber
The heading's level number—for example, an
<h1> would produce level: 1.slugString
A slug of the heading's text, created by Baleada Logic's
createSlug pipe. This slug also becomes the HTML id of the heading, so you can use it to create anchored links.textString
The text content of the rendered HTML inside the heading.
Each item in store.media has the following structure:
Property
Type
Description
tagString
The actual HTML tag
BaleadaProseMedia renders on the page, inferred from the type.