3 回答

TA貢獻1829條經驗 獲得超7個贊
我認為在你的情況下,你想在商店中保存的不是一個數組,而是一個對象,它會使這一步更容易。像這樣:
export const store = readable({} , set => {
let channels = {};
let socket = new WebSocket("ws://localhost:65432");
socket.onmessage = function ({data}) {
let { channel, value } = JSON.parse(data);
// update `channels`
channels = {...channels, [channel]: value };
// set the new `channels` as store value
set(channels)
}
})
請注意,通過這種方式,您將直接將通道作為對象的鍵:因此,如果通道已經存在,則將更新而不是添加它。如果它不存在,它將被添加。
因此,在您的訂閱者中,您可以擁有類似以下內容的內容:
store.subscribe(channels => {
for (let [channel, value] of Object.entries(channels)) {
console.log(`channel ${channel} received ${value}`);
}
});
最后要注意的是,請考慮此代碼每次更新都會創建一個新對象以避免副作用,這是常見的做法。但是,如果您對象中有很多數據并且意識到可能的含義,則可以出于性能/內存原因添加/更新單個鍵而無需每次都復制對象。
希望它有幫助!

TA貢獻1943條經驗 獲得超7個贊
我認為可讀的商店不能解決您的問題,因為您在這里沒有更新方法。你為什么不試試可寫的商店呢?它為您提供了一個以當前值作為參數的更新函數,因此您可以執行如下操作:
let socket = new WebSocket("ws://localhost:65432");
socket.onmessage = function(event) {
var data = JSON.parse(event.data);
var channel = data.channel;
store.update(n => [...n, { id: data.channel, value: data.value }]);
};
下面是一個 REPL,其中包含其工作原理的示例。它使用間隔來模擬 Webhooks 功能。如果打開控制臺,則可以看到更新的存儲值。

TA貢獻1712條經驗 獲得超3個贊
您也可以在回調中訪問可讀存儲的實際值。然后,您可以更新現有陣列,而無需全部替換:
<script>
import {readable} from 'svelte/store'
let intervalHandle
const arr = new readable(['Start'], (set) => {
intervalHandle = setInterval(() => {
set([...$arr, 'Another value'])
}, 1000)
})
</script>
<h1>Readable demo</h1>
<button on:click={() => clearInterval(intervalHandle)}>Stop it</button>
{#each $arr as item}
<div>{item}</div>
{/each}
添加回答
舉報