#javascript #html #alpine.js
Вопрос:
<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> Приведенный выше код выдает следующую ошибку:
Как я могу решить проблему и повторно использовать данные AlpineJS?
Ответ №1:
Вы можете использовать Alpine.store для доступа к глобальному альпийскому штату. (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> Комментарии:
1. Не совсем эффективно при получении и настройке огромных данных. Кроме того, я думаю, что Alpine store слишком многословен для простых операций, таких как get amp; set.