"stores" tab

Devtools can have a “stores” tab

Spruce has a methods (outside of Alpine) for:

• accessing stores: https://docs.ryangjchandler.co.uk/spruce/stores#accessing-a-store-from-javascript
• set data in store: https://docs.ryangjchandler.co.uk/spruce/stores#overwriting-a-store
• watching a store: https://docs.ryangjchandler.co.uk/spruce/watchers
• listing stores with Object.keys(Spruce.stores)

(“stores” > “spruce” so that we’re forward compatible if stores make it into v3)

_Originally posted by @HugoDF in https://github.com/alpine-collective/alpinejs-devtools/discussions/175_

[Yahav]

@Niush Just tried that, doesn’t seem to be working with devtools. Alpine.store(‘_devtools_stores’) does output the stores but the devtools shows it as empty. Its a shame.

EDIT: This seem to work:

<input
    type="hidden"
    x-title="_devtools_stores"
    x-effect="new_store = { ...$store }; delete new_store._devtools_stores; $store._devtools_stores = new_store"
    x-data="{new_store: null}"
/>

[stepanjakl]

@Niush @Yahav Your solution works great! However, it would be nice to see global $store(s) natively inside the extension.