亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Svelte 可讀存儲陣列中,如何只更新一個項目而不接觸其他項目?

在 Svelte 可讀存儲陣列中,如何只更新一個項目而不接觸其他項目?

神不在的星期二 2022-09-11 20:15:11
我想這個問題更多的是關于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});    }})在這里,我無法設法“設置”數組,并且不必在每次更新時聲明整個數組。
查看完整描述

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}`);

  }

});

最后要注意的是,請考慮此代碼每次更新都會創建一個新對象以避免副作用,這是常見的做法。但是,如果您對象中有很多數據并且意識到可能的含義,則可以出于性能/內存原因添加/更新單個鍵而無需每次都復制對象。


希望它有幫助!


查看完整回答
反對 回復 2022-09-11
?
楊__羊羊

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 功能。如果打開控制臺,則可以看到更新的存儲值。


查看完整回答
反對 回復 2022-09-11
?
交互式愛情

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}


查看完整回答
反對 回復 2022-09-11
  • 3 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號