Alpine.store property not reactive?

[galaczi]

I have a scroll event listener on the window:

<div x-data @scroll.window="$store.profile.scrollShowHideMenu">

The event handler function:

scrollShowHideMenu() {
  console.log(this.showSubMenu)
  if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250 ) {
    this.showSubMenu = true
  } else {
    this.showSubMenu = false
  }
}

The console.log correctly prints the value of showSubMenu but when I try something like this, it doesn't seem to pick up changes:

<span x-text=$store.profile.showSubMenu></span>

It's always false. Am I misunderstanding something?

[thetutlage]

Yup, struggling with the same behavior. I am infact using the exact same example from the docs https://alpinejs.dev/globals/alpine-store

[thetutlage]

Okay, got it work. It seems like you will have to call the function explicitly. Make the following changes in your code for it work.

<div
  x-data
- @scroll.window="$store.profile.scrollShowHideMenu"
+ @scroll.window="$store.profile.scrollShowHideMenu()"
>

[ekwoka]

Can you show the whole component?

But yes, as shown there.

When you don't do the () then you've taken the function off of the object, so the this refers to the function itself and not the store object.

Basically with ()

It's like

addEventListener('scroll', ()=>$store.thing.function)

While without is like

addEventListener('scroll', $store.thing.function)

I'm sure you've seen how this changes how methods on objects work.

With methods on the current component, without still works because of how Alpine tries to "correct" for this by using the component as the this.

If you check for the showMenu or whatever on the component, I'm sure you'll see it changes.

[viveckio]

This is a little unintuitive after working with Alpine.data() where it is optional to user the parens.
I really had to debug for a long time and then finally land here to get it right as I'm more used to working with Alpine data way of using methods without () like this $store.profile.scrollShowHideMenu

We should highlight this point in the docs, maybe?

[ekwoka]

It's the same thing, and also happens with Alpine.data.

when you don't use the () then the this is the current scope of the element. If you use the () then the this is the object it's attached to (if its at the root then this is the current scope of the element).

It's intuitive when you recognize how object methods work (And how this works) and understand that your written expression is evaluated, and if it's a function that function is called.

So it's more like

let result = EXPRESSION
if (typeof result === 'function') 
  result = result.call(scope)

So naturally if EXPRESSION is a function, that function is given a new this that may not match it's original.

like

let result = [1,2,3].map
if (typeof result === 'function') 
  result = result.call(scope)

That should be pretty obvious there is an issue.