如何构建活股票报价的苗条商店

Question

我正在尝试在Svelte商店中维护实时股票报价，以便屏幕上的出价和要价实时更新。 我不确定如何构建存储以保持数据的反应性和效率。 数据来自 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>