Quería almacenar un valor entero en el almacenamiento local usando alpine.js
Hay un botón que incrementa el valor en 1 cuando se presiona.
Así es como pensé que debería ser:
<div id="greeting" class="inner" x-data="{ $store.integer: 0 }"> <button class="button bouncy" @click="$store.integer+=1" x-text="$store.integer + ' is the number'"></button> </div> <script> document.addEventListener('alpine:init', () => Alpine.store('store', integer) }) </script>Esto no funcionó. Probé algunas otras implementaciones, pero ninguna parecía funcionar. También intenté no agregar $store, ya que mostraba el número entero como "indefinido" cuando lo hice.
Alpine tiene el complemento de persistencia que parece que podría satisfacer sus necesidades.
https://alpinejs.dev/plugins/persist
<div x-data="{ count: $persist(0) }"> <button x-on:click="count++">Increment</button> <span x-text="count"></span> </div>Tienes un par de errores en el código de ejemplo. La versión corregida es la siguiente:
<div id="greeting" class="inner" x-data="{}"> <button class="button bouncy" @click="$store.integer += 1" x-text="$store.integer + ' is the number'"></button> </div> <script> document.addEventListener('alpine:init', () => { Alpine.store('integer', 0) }) </script>x-data , ya que está definido en el gancho alpine:init . Por lo tanto, puede usar solo x-data vacíos (suponiendo que no tenga otras variables en el componente).{ después de => .