svelte - 如何构建实时股票报价的 Svelte 商店

Question

我正尝试在 Svelte 商店中维护实时股票报价，以便屏幕上的出价和要价实时更新。我不确定商店的结构如何来保持数据的 react 性和效率。数据来自 websocket，如下所示:

{'symbol':'AAPL', 'bid':305.52, 'ask':305.55}

我最初的尝试是这样的:

import { readable, writable } from 'svelte/store';

export let quotes = {}

function addQuotes(sym) {
  const quote = writable({
    bid: 0,
    ask: 0
  });
  quotes[sym] = quote;
}

我想做的是在整个 SPA 中提供一个单一的报价图，但每个单独的报价仅更新其自己的符号，而不是整个页面，每次更改。

这显然是错误的，但我不确定该怎么做。 (这是我第一次使用 Svelte。)

Answer 1

你走在正确的轨道上。

将股票价格作为散列存储在 writable() 存储中。

// in stores.js
export const stocks = writable({})

然后，当您想要更新价格或添加新股票时，您可以调用 stocks.update()。

// in stores.js
export function update(symbol, data) {
  // using `...` to destructure a copy, we don't want to overwrite previous value
  stocks.update(({...records}) => { 
    // now update the copy
    records[symbol] = data

    // return the new value for the store, this will trigger updates in templates that subscribe 
    return records
  })
}

在您的 .svelte 组件中，导入 store.js

<script>
  import {stocks, update} from './store.js'
  import {onMount} from 'svelte'

  update('AAPL', {ask: 10, bid: 20})
  update('MSFT', {ask: 10, bid: 20})

  onMount(() => {
    setTimeout(() => update('AAPL', {ask: 10.20, bid: 10.25}), 2000)
    setTimeout(() => update('AAPL', {ask: 10.30, bid: 10.35}), 4000)
  })
</script>

<!-- use dollar sign in front of store name to make svelte auto-subscribe -->

<pre>
  {JSON.stringify($stocks, null, 2)}
</pre>