Skip to content

Alpine.$persist() used as direct store displays [Object Object] before hydration #4855

Description

@saeidex

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:

[Object Object]

instead of:

EN

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:

$store.language

evaluate to:

EN

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:

Image

How do you expect it to work?

Image

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be removed if I haven't met the criteria above.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions