Svelte：如何订阅类实例中的存储答案

【问题标题】：Svelte: How to subscribe to store inside a class instanceSvelte：如何订阅类实例中的存储
【发布时间】：2022-01-25 04:47:20
【问题描述】：

如何订阅 writable() 类的实例？

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>

当我点击按钮时，我希望钱被添加并反映在 div 上。但是它没有更新，尽管我正确地引用了 money 商店。

【问题讨论】：

标签： javascript svelte svelte-3 svelte-store

【解决方案1】：

解决了；其实很容易。只需解构类实例：

<script>
    let user = new User();
    let { money } = user;
</script>

<div>{$money}</div>
<button on:click={() => user.goToJob()}>Go to Job</button>

【讨论】：

【解决方案2】：

从未将 store 视为 Class 属性，但 store 通常用作 DTO 的一种。我对打字稿一无所知，但我认为下面的代码会让你更好地了解我在说什么：

<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>

显示或赋值给商店使用 $ 前缀 ($user.money) 但调用函数不 (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;

链接在这里：

https://svelte.dev/repl/ec4a3dee9f3c4bbebf929ee5772c48c5?version=3.46.2

最好的。

【讨论】：