CODEWITHSUNDEEP
javascripthtmlalpine.js
DelusionaL
DelusionaL

Reputation: 955

How to reuse AlpineJs Data?

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<div x-data="info">
  <span x-text="data"></span>
</div>

<div x-data="info">
  <span x-text="data"></span>
</div>

<script>
  let info ={
  data: "hello"
}

document.addEventListener("alpine:init", () => {
    info = Alpine.reactive(info)
    Alpine.data("info", () => info);
 });
</script>

Above code gives following error:

enter image description here

How can I solve the issue and reuse AlpineJS Data?

Upvotes: 2

Views: 1635

Answers (2)

comforx
comforx

Reputation: 142

It does not work because each x-data will reinitiate its express, means inject magics, Alpine.data into x-data result. In your case two x-data refer to the same object "info". This info will be initiate twice, it fails in the second time when inject "$nextTick" magic. The solution will be make x-data refer to its own root object, assign the common "info" to their properties. Here is a modified version:

<head>
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.js"></script>
</head>

<body>
  <div x-data="first">
    <span x-text="info.data"></span>
  </div>

  <div x-data="second">
    <span x-text="info.data"></span>
  </div>

  <script>
    let first = {}
    let second = {}
    let info = {
      data: "hello"
    }

    document.addEventListener("alpine:init", () => {
      info = Alpine.reactive(info)
      first.info = second.info = info
      setTimeout(() => {
        info.data = "world"
      }, 1000)
    });
  </script>
</body>

Upvotes: 1

ptts
ptts

Reputation: 2086

You can use Alpine.store to access global Alpine state. (https://alpinejs.dev/magics/store)

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"></script>

<div x-data>
  <span x-text="$store.info.data"></span>
</div>

<div x-data>
  <span x-text="$store.info.data"></span>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.store('info', {
            data: "Hello 👋🏼"
        })
    })
</script>

Upvotes: 1

Related Questions