0
174
ViewsHow 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:
How can I solve the issue and reuse AlpineJS Data?
ยท
Juan Pablo Isaza
1 answers
Answer question0
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>
ยท
Juan Pablo Isaza
Report
Answer question