¿Cómo me suscribo a una instancia de writable() de una clase?
class User{ public money: Writable<number> = writable(0); public goToJob(){ money.update(prev => prev + 100); } } <script> let user = new User(); </script> <div>{user.$money}</div> <button on:click={() => user.goToJob()}>Go to Job</button> Cuando hago clic en el botón, espero que el dinero se agregue y se refleje en el div. Sin embargo, no se actualiza, aunque estoy haciendo referencia correctamente a la tienda de money .
Resuelto; Bastante fácil en realidad. Simplemente desestructura la instancia de la clase:
<script> let user = new User(); let { money } = user; </script> <div>{$money}</div> <button on:click={() => user.goToJob()}>Go to Job</button>Nunca vi una tienda como una propiedad de clase, sino que la tienda se usa a menudo como una especie de DTO. No sé nada sobre mecanografiado, pero creo que el siguiente código te dará una mejor idea de lo que estoy hablando:
<script> import user from './user-store.js'; { $user // This automatically subscribes and unsubscribe to the User store. } $user = {money:100}; </script> <div>{$user.money}</div> <button on:click={() => user.goToJob()}> Go to Job </button>Mostrar o asignar un valor a la tienda usa el prefijo $ ($user.money) pero llamar a una función no (user.goToJob())
import { writable } from 'svelte/store'; const user = writable({}); // the store is an empty object by default const userStore = { subscribe: user.subscribe, set: u => { user.set(u); console.log(u); }, delete: () => { user.set(null); }, goToJob: () => { user.update(user => { user.money += 100; return user; }); } }; export default userStore;Enlace aquí:
https://svelte.dev/repl/ec4a3dee9f3c4bbebf929ee5772c48c5?version=3.46.2
Mejor.