Re-use persist/localStorage vars

[robdekort]

Hey kind folks,

I'm toying around with this and I can't get this to work. It's probably not a bug but me so I'm posting it in help first :-)

<button
    x-data="{ myVar: $persist(false) }"
    x-text="myVar"
    @click="myVar = true"
>
</button>

<div
    x-data="{ myVar: $persist(false) }"
    x-show="myVar"
>
    Show when myVar = true
</div>

So when you click the button you set myVar in localStorage to true. After a reload I would expect the second div to show since it has x-show="myVar". But it doesn't. Yet the localStorage of myVar is set to true.

Thanks in advance.

[pedroborges]

You are declaring x-data in two sibling elements. Changing myVar on the first won't affect the second. Moving x-data to a parent element fixes it.

The $persist() plugin will automatically take care of stringifying and parsing its value to/from JSON. You can also remove both x-effect attributes.

<div x-data="{ myVar: $persist(false) }">
  <button
    x-text="myVar"
    @click="myVar = !myVar"
  >
  </button>

  <div x-show="myVar">
      Show when myVar = true
  </div>
</div>

[SimoTod]

What i mean is that when loadimg the page, it will get the value from localstorage for both components (you saw the other post, there's probably a bug there but that is the expectation). Once the page is loaded, clicking on the button will not dinamically update the same value on the other component. To share a value between 2 components you need to use a store. At that point you can use $persist inside the store to get the value from localstorage on page load

[SimoTod]

I can send you an example later once I get home.

[robdekort]

Gotcha. No that I didn't expect it to do. It's the other issue that had me confused. Thanks. Appreciate it.

[SimoTod]

AH, cool, I thought you were expecting them to interact on the page as well as fetching the value from localstorage.
It doesn't seem that $persist and $store are compatible anyway so no example 😂 .

[robdekort]

I found that as well. Would be super duper cool though. But for me not needed at this point. Hope Caleb agrees with the issue in the other discussion.