How to use plugins like $persist within Alpine.data() blocks

[mattwaler]

Hello!

I'm loving Alpine v3. I have a question about how to use plugins and magic properties inside Alpine.data(). I know that things like this.$refs work just fine, but I'm unable to use the persist plugin like so:

document.addEventListener('alpine:init', () => {
  Alpine.data('find', () => ({
    range: this.$persist(50),
  }))
})

I noticed that the documentation on this plugin doesn't show any examples on how to accomplish this either. Is there any way for me to replicate the plugin without using it inside the x-data attribute?

[jonnitto]

I've got the same questions… Any hint?

I try to get a demo running (ToDo MVC) with the persist plugin, but I didn't get it to work: https://codepen.io/jonnitto/pen/OJmEKpw

[SimoTod]

You need to use a standard function.
Alpine needs to bind a custom this to make magics available and in javascript is not possible to re-bind this for arrow functions.

document.addEventListener('alpine:init', () => {
  Alpine.data('find', function() {
    return {
      range: this.$persist(50)
    }
  })
})