how to global x-data? , change two componets with same x-data

[FlurryNight]

Hi, im trying sync isLoading on a function to two components with same x-data to show a template with x-if="isLoading"

function _houses() {
  return {
      ...
      isLoading : false,
      fetch: async function(){
         ...
         this.isLoading = true;
      }
  }
}

but it only updates on the first component with x-data="_houses()"

I´ve tried using Alpine.data and Alpine.store as mentioned in posts and docs for global states, but after debugging with alpine dev tools the isLoading is only updated on the first component.

How can i achieve a global state where both componets react to prop changes like isLoading

Thx!

[danddanddand]

If they are two separate components with their own x-data, Alpine.store is probably the easiest way to go.

Alternatively, you could nest the two components under a parent component that has isLoading state and that parent state can be accessed/mutated by children components.

[FlurryNight]

uh, ok , let me try, thx

[FlurryNight]

this x-data="$store.houses" or this x-data="$store.houses()"
they give error:
Cannot redefine property: $nextTick
$store.houses is not a function

[FlurryNight]

Done fixed, add x-data="$store.houses" on first component and x-data only , one second , right?

[SimoTod]

you can see a simple example here: https://alpinejs.dev/magics/store
You don't need to assign the store to data, just use an empty x-data (or an x-data with other values) and $store in your x-if
Use the store is just for the shared functionalities.

[FlurryNight]

Ok, i did try that one xD, it gave me object propety error, But now its working, Thank you so much!

I will mark as answered
@danddanddand
@SimoTod