Using 'this' when calling a function in a store #4067

docdunning · 2024-03-04T00:02:44Z

docdunning
Mar 4, 2024

I've found that it's important to use brackets when calling a function in a store from an Alpine directive.

If the function is in the data() context, then it doesn't matter whether I use brackets or not.

For a function in a store(), if I use brackets, this refers to the store; but without brackets, this refers to the current data context. See example code below.

Why does this happen?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="mydata">
  <button @click="showdata">Data function no brackets</button>
  <button @click="showdata()">Data function with brackets</button>
  <button @click="$store.mystore.storedata">Store function no brackets</button>
  <button @click="$store.mystore.storedata()">Store function with brackets</button>
</div>
<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('mydata',() => ({
    var1: 'abc',
    showdata () {
      console.log('Data',this.var1)
    }
  }))
  Alpine.store('mystore', {
    var1: 'xyz',
    storedata () {
      console.log('Store',this.var1)
    }
  })
})
</script>
</body>
</html>

Answered by ekwoka

Mar 4, 2024

good question, but no.

if you image it like

const result = EXPRESSION

then the two you mention would be liek

const result = $store.mystore.storedata

const result = $store.mystore.storedata()

the first is simply evaluating to a function.

The second is calling the function and resolving to whatever that function returns.

In the second, storedata() is invoked as a method on mystore.

In the first, storedata is isolated separately from the object, and then called with the $data as the lexically bound this.

View full answer

ekwoka · 2024-03-04T06:14:43Z

ekwoka
Mar 4, 2024

Wheb the expression is run it's bound to the current data context. If it returns a function, the function is run and bound to the current data context.

3 replies

docdunning Mar 4, 2024
Author

Thanks, @ekwoka, but you say "If it [the expression] returns a function".

In my example, both expressions $store.mystore.storedata and $store.mystore.storedata() cause the function to run. Doesn't this mean that both are returning functions?

As I mentioned, when it runs, the second one (with brackets) uses the store's context. The first uses the data context. To be fair, the important thing is to know this, rather than to understand it ;-)

But could you explain a little more?

ekwoka Mar 4, 2024

good question, but no.

if you image it like

const result = EXPRESSION

then the two you mention would be liek

const result = $store.mystore.storedata

const result = $store.mystore.storedata()

the first is simply evaluating to a function.

The second is calling the function and resolving to whatever that function returns.

In the second, storedata() is invoked as a method on mystore.

In the first, storedata is isolated separately from the object, and then called with the $data as the lexically bound this.

Answer selected by docdunning

docdunning Mar 4, 2024
Author

Got it, thanks.

I guess it's more likely that storedata() is the way to go. A store's functions very probably need access to the store's own properties.

My current use case is for a callback on the x-json directive I built.

x-json:mystore="$store.mystore.storedata"

After x-json has populated the store, the callback does a little more manipulation of the data. But as coded above, I was getting errors because this was bound to $data. So the answer is just to do this instead:

x-json:mystore="$store.mystore.storedata()"

All good.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Using 'this' when calling a function in a store #4067

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Using 'this' when calling a function in a store #4067

Uh oh!

docdunning Mar 4, 2024

Replies: 1 comment · 3 replies

Uh oh!

ekwoka Mar 4, 2024

Uh oh!

docdunning Mar 4, 2024 Author

Uh oh!

ekwoka Mar 4, 2024

Uh oh!

docdunning Mar 4, 2024 Author

docdunning
Mar 4, 2024

Replies: 1 comment 3 replies

ekwoka
Mar 4, 2024

docdunning Mar 4, 2024
Author

docdunning Mar 4, 2024
Author