$data equivalent in v3

[Roan-Roodenburg]

Hello,

In v2 I could use '$data' in my x-init to access the x-data object. After upgrading to V3 this did not seem to work anymore. I figured out a way to access the data object $refs.component._x_dataStack[0], but I don't think that's how it should be.

I use Laravel Livewire @entangle in my x-data object, so to move it to Alpine.data() on alpine:init I would have to make a hacky solution as well as far as my knowledge goes. Something like this:

document.addEventListener('alpine:init', () => {
    Alpine.data('componentData', () => ({
        show: false,
        livewireModel: window.Livewire.find(document.querySelector('[livewire-component]').getAttribute('wire:id')).entangle('livewireModel')
    }))
})

I used to pass the $data variables to a function on init that calculates if it should show buttons for a scroll/slider, and manipulate the data accordingly.

Any help would be greatly appreciated!

[KevinBatdorf]

I think ._x_dataStack[0] is the way now. If you don't want to use a ref though you could use Alpine.closestRoot($el)

I'm not sure about the Livewire approach though, I'm not very familiar with it.

[SimoTod]

Why do you need to pass $data? All variables are already available in init (e.g. this.show = true to update show)

[kylethielk]

We used a similar pattern to @Roan-Roodenburg to provide access to the Alpine Proxy outside of the Alpine component scope.

For example we used to do this on V2

<div x-data="{visible: false}" x-init="MyData = $data">

And then we could do MyData.visible = true from anywhere to get the reactive behavior. This has proved incredibly useful when working Alpine into an existing codebase.

For V3, we created our own directive x-global to do this:

document.addEventListener('alpine:init', () => {
  Alpine.directive('global', function (el, { expression }) {
                let f = new Function('_', '$data', '_.' + expression + ' = $data;return;');
                f(window, el._x_dataStack[0]);
            });
});

This has the same effect and can be used like so:

<div x-data="{visible: false}" x-global="MyData">

[SimoTod]

Most of the time, you can use this to get the old $data

<div x-data="{visible: false, init() {window.MyData = this}}">
  <p x-show="visible">content</p>
</div>

<button onclick="window.MyData.visible = ! window.MyData.visible">Toggle</button>

(https://codepen.io/SimoTod/pen/YzQzOEX)

[Roan-Roodenburg]

@SimoTod I use the variables in a x-on:resize.window="myFunction($el.__x.$data)" aswel which then could have access to the same data as from the x-init.

I think @kylethielk his approach is cleaner than mine, so I'll try to incorporate the Livewire aspect in it and see if that works

[SimoTod]

Most of the time, you can just use this in the right way to get the old $data.
See https://codepen.io/SimoTod/pen/PojoBLw
(However, accessing $data from an external function is a bit of a code smell but I assume you have your reason to do it)