Store
The Enhance store is a single source of truth and how you get access to complex data types such as Array
and Object
inside your Custom Element pure functions. This is needed because attributes can only be of type string. Enhance projects are also preconfigured to pass initial state from API routes. This single source of truth is how you pass application data to your Custom Element pure functions.
Access store
The store
is available from the state
argument passed to your Custom Element pure function.
export default function MyMessage({ html, state }) {
const { store } = state
const { message } = store
return html`
<h1>${message}</h1>
`
}
Use attrs
as keys
One powerful technique is to use your element’s attributes as keys to access complex data from your store
export default function MyElement({ html, state }) {
const { attrs, store } = state
const { message = '', bookId = '' } = attrs
const { books = {} } = store
const book = books[bookId]
const bookTitle = book.title || ''
return html`
<div>
<h3>${bookTitle}</h3>
</div>
`
}
That’s it
You now know how to pass application data to your elements to be used in pages. Read more about Enhance projects api
and api
routes to learn how to incorporate data.