Alpine.js version
v3.15.12
Browser and operating system
Helium(Chromium based) on Windows
Describe the issue you're experiencing
Alpine.$persist() behaves differently depending on how it is used.
When used inside an object store, everything works as expected.
Alpine.store("language", {
current: Alpine.$persist("EN").as("language"),
toggle() {
this.current = this.current === "EN" ? "IT" : "EN";
},
});
<button
x-data
x-cloak
x-on:click="$store.language.toggle()"
x-text="$store.language.current"
></button>
Result:
- Initial value:
EN
- Persist works
- Updates work
However, when Alpine.$persist() is used directly as single store value:
Alpine.store("language", Alpine.$persist("EN").as("language"));
<button
x-data
x-cloak
x-on:click="$store.language === 'EN' ? $store.language = 'IT' : $store.language = 'EN'"
x-text="$store.language"
></button>
Initial render displays:
instead of:
After persistence/hydration, value behaves differently than expected.
Expected behavior
Direct store should behave same as persisted property inside object store.
Alpine.store("language", Alpine.$persist("EN").as("language"));
should make:
evaluate to:
not persistence wrapper object.
Code snippets to reproduce the issue
Alpine.store("language", Alpine.$persist("EN").as("language"));
<button
x-data
x-cloak
x-on:click="$store.language === 'EN' ? $store.language = 'IT' : $store.language = 'EN'"
x-text="$store.language"
></button>
Screenshots/screen recordings
shows:
How do you expect it to work?
Please confirm (incomplete submissions will not be addressed)
Alpine.js version
v3.15.12
Browser and operating system
Helium(Chromium based) on Windows
Describe the issue you're experiencing
Alpine.$persist()behaves differently depending on how it is used.When used inside an object store, everything works as expected.
Result:
ENHowever, when
Alpine.$persist()is used directly as single store value:Initial render displays:
instead of:
After persistence/hydration, value behaves differently than expected.
Expected behavior
Direct store should behave same as persisted property inside object store.
should make:
evaluate to:
not persistence wrapper object.
Code snippets to reproduce the issue
Screenshots/screen recordings
shows:
How do you expect it to work?
Please confirm (incomplete submissions will not be addressed)