在 Svelte 可读存储阵列中，如何只更新一个项目而不接触其他项目？

Question

我想这个问题更多的是关于JS系统的，但我有一个这样的存储数组：

export const store = readable( {id: 0, value: 0} , set => {

    let socket = new WebSocket("ws://localhost:65432");

    socket.onmessage = function (event) {

        var data = JSON.parse(event.data);

        set({id: 0, value: data});

    }

})

应用商店定义其 set 方法以从 websockets 连接更新值。除了使用存储阵列之外，我该如何执行相同的操作？像这样：

arr = [];

for(i=0; i<numberOfItems; i++) {

    arr = [...arr,{id: i, value: 0}];

}

export const store = readable( [{arr}] , set => {

    let socket = new WebSocket("ws://localhost:65432");

    socket.onmessage = function (event) {

        var data = JSON.parse(event.data);

        var channel = data.channel;

        set({id: data.channel, value: data.value});

    }

})

在这里，我无法设法“设置”数组，并且不必在每次更新时声明整个数组。

Answer 1

我认为在你的情况下，你想在商店中保存的不是一个数组，而是一个对象，它会使这一步更容易。像这样：export const store = readable({} , set => {&nbsp; &nbsp; let channels = {};&nbsp; &nbsp; let socket = new WebSocket("ws://localhost:65432");&nbsp; &nbsp; socket.onmessage = function ({data}) {&nbsp; &nbsp; &nbsp; &nbsp; let { channel, value } = JSON.parse(data);&nbsp; &nbsp; &nbsp; &nbsp; // update `channels`&nbsp; &nbsp; &nbsp; &nbsp; channels = {...channels, [channel]: value };&nbsp; &nbsp; &nbsp; &nbsp; // set the new `channels` as store value&nbsp; &nbsp; &nbsp; &nbsp; set(channels)&nbsp; &nbsp; }})请注意，通过这种方式，您将直接将通道作为对象的键：因此，如果通道已经存在，则将更新而不是添加它。如果它不存在，它将被添加。因此，在您的订阅者中，您可以拥有类似以下内容的内容：store.subscribe(channels => {&nbsp; for (let [channel, value] of Object.entries(channels)) {&nbsp; &nbsp; console.log(`channel ${channel} received ${value}`);&nbsp; }});最后要注意的是，请考虑此代码每次更新都会创建一个新对象以避免副作用，这是常见的做法。但是，如果您对象中有很多数据并且意识到可能的含义，则可以出于性能/内存原因添加/更新单个键而无需每次都复制对象。希望它有帮助！

Answer 2

我认为可读的商店不能解决您的问题，因为您在这里没有更新方法。你为什么不试试可写的商店呢？它为您提供了一个以当前值作为参数的更新函数，因此您可以执行如下操作：&nbsp; &nbsp; let socket = new WebSocket("ws://localhost:65432");&nbsp; &nbsp; socket.onmessage = function(event) {&nbsp; &nbsp; &nbsp; var data = JSON.parse(event.data);&nbsp; &nbsp; &nbsp; var channel = data.channel;&nbsp; &nbsp; &nbsp; store.update(n => [...n, { id: data.channel, value: data.value }]);&nbsp; &nbsp; };下面是一个 REPL，其中包含其工作原理的示例。它使用间隔来模拟 Webhooks 功能。如果打开控制台，则可以看到更新的存储值。

Answer 3

您也可以在回调中访问可读存储的实际值。然后，您可以更新现有阵列，而无需全部替换：<script>&nbsp; &nbsp; import {readable} from 'svelte/store'&nbsp; &nbsp; let intervalHandle&nbsp; &nbsp; const arr = new readable(['Start'], (set) => {&nbsp; &nbsp; &nbsp; &nbsp; intervalHandle = setInterval(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; set([...$arr, 'Another value'])&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }, 1000)&nbsp; &nbsp; })</script><h1>Readable demo</h1><button on:click={() => clearInterval(intervalHandle)}>Stop it</button>{#each $arr as item}<div>{item}</div>{/each}