(Updated: )
/ #alpinejs #javascript 

Access Alpine.js component data/state from outside its scope

Warning this uses Alpine.js v2 internals, there isn’t currently a public-facing API to do this.

As an active Alpine.js and Alpine.js Devtools contributor, I’ve had the pleasure of explaining how to access Alpine.js component data from outside the component and of using my suggestion as part of work I did on the community-maintained Alpine.js Devtools.

Table of Contents

How Alpine.js keeps track of x-data/state

The short story of how Alpine.js tracks component state (or “data”) is that when it initialises, it runs the content of x-data, wraps it in a proxy (which allows for reactive view updates) and stores it on the component’s root node.

Why store it on the root node?

Well:

  1. Why not?
  2. Where else would it be stored? Alpine.js doesn’t have a Virtual DOM or any sort of abstraction layer where it can store this information.

It actually stores it on the root node as the __x.$data property, to access it we can use the __x.getUnobservedData() function.

Accessing an Alpine.js component’s state/data from outside it

For example if we go to Alpine.js Playground and open the console we can run document.querySelector('[x-data]').__x, which will give us the following.

Output of document.querySelector('[x-data]').__x for Alpine.js Playground in the console

Accessing __x.$data directly returns the proxy, thankfully Alpine.js provides a getUnobservedData() helper which unfurls the proxy.

Similarly as reading __x we can run document.querySelector('[x-data]').__x.getUnobservedData() in the console. Which gives us the following:

Output of document.querySelector('[x-data]').__x.getUnobservedData() for Alpine.js Playground in the console

Note: the full detail of how that application works is in Integrating Alpine.js with Eleventy & YAML files to create Alpine Playground’s Collections.

For multiple Alpine.js components, you should use document.querySelectorAll('[x-data]'), in that case, the __x property will be on the elements in the NodeList. So for example to get all the data from all the Alpine.js components on a page, we can use:

document.querySelectorAll('[x-data]').forEach(el => {
  console.log(el.__x.getUnobservedData());
});

That’s how you access Alpine.js state/data from outside of it, nice and easy since Alpine.js stores everything on the DOM Nodes. Note that you really shouldn’t use any of the code from this post and instead download the community-maintained Alpine.js Devtools.

unsplash-logoJeremy Perkins

Author

Hugo Di Francesco

Co-author of "Professional JavaScript", "Front-End Development Projects with Vue.js" with Packt, "The Jest Handbook" (self-published). Hugo runs the Code with Hugo website helping over 100,000 developers every month and holds an MEng in Mathematical Computation from University College London (UCL). He has used JavaScript extensively to create scalable and performant platforms at companies such as Canon, Elsevier and (currently) Eurostar.

Interested in Alpine.js?

Subscribe to Alpine.js Weekly. A free, once–weekly email roundup of Alpine.js news and articles