Магазин Svelte не обновляется на экране - PullRequest
Новая
       66

Магазин Svelte не обновляется на экране

1 голос
/ 10 января 2020

Я новичок в Svelte, и я делаю ошибку ладьи ie. У меня есть подключение к серверу через веб-сокет, и я регистрирую сотни сообщений и добавляю их в магазин, но страница не обновляется совсем.

App.svelte 

<script>
    import Socket from "./Socket.svelte"
    import msgs from './stores'
</script>

<main>
    <Socket items="{$msgs}"/>
</main>

Socket.svelte 

<script>
    export let items
</script>

{items.length}
{#if items}
    {#each items as msg, i}
        <p>{i} {msg}</p>
    {/each}
{:else}
    <p class="loading">waiting...</p>
{/if}

сокет. js

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

let msgs = []
const msgStore = readable(msgs)
export default msgStore

const socket = new WebSocket("ws://localhost:8080/socket");

socket.binaryType = "arraybuffer";

socket.onopen = function (event) {
  msgs = [...msgs, "Connected"];
};

socket.onmessage = function (event) {
  msgs = [...msgs, event];
  console.log(msgs.length)

  const msg = JSON.parse(event.data)
  const msgType = msg.messageType
  console.log(msgType)
};

В браузере получаю 0 для начальной длины массива элементов, но он никогда не обновляется, даже если сообщения текут.

1 Ответ

2 голосов
/ 10 января 2020

На самом деле вы никогда ничего не вставляете в msgStore, только в msgs массивы ... Что само по себе не реактивно.

В вашем случае проще всего использовать доступное для записи хранилище: 

const msgs = []
export const msgStore = writable([])

socket.onmessage(e => {
  ...
  msgs.push(msg)
  msgStore.set(msgs)
})

Вы можете защитить от внешнего отпуска, экспортировав его производное вместо хранилища с возможностью записи: 

export const publicMsgStore = derived(msgStore, x => x)

Или, чтобы сделать это за один шаг с читаемым хранилищем, вам нужно это чтобы обернуть всю логику c: 

export const msgStore = readable([], set => {
  const msgs = []
  ...
  socket.onmessage(e => {
    ...
    msgs.push(msg)
    set(msgs) // <= UPDATE THE STORE!!
  })
})

Вам необходим вызов встроенной функции set, чтобы изменить значение читаемого хранилища (или уведомить его об изменении его значения).

...