Svelte 苗条商店未在屏幕上更新

我是苗条新手，我犯了一个新手错误。我有一个到服务器的websocket连接，我记录了数百条消息并将它们添加到一个存储中，但是页面根本不更新

App.svelte

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

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

<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}

---

在浏览器中，我得到了items数组初始长度的

0

，但即使消息不断流动，它也不会更新。

您实际上从未将任何内容推入

msgStore

，只有

msgs

数组。。。这本身不是反应性的

最简单的方法是使用可写存储：

const msgs=[]
export const msgStore=可写（[]）
socket.onmessage（e=>{
...
msgs.push（msg）
msgStore.set（msgs）
})

通过导出此文件的派生文件而不是可写存储，可以防止外部回火：

导出常量publicMsgStore=derived（msgStore，x=>x） 或者，要使用可读存储一步完成，您需要它来包装您的整个逻辑：

export const msgStore=readable（[]，set=>{
常量msgs=[]
...
socket.onmessage（e=>{
...
msgs.push（msg）
set（msgs）//谢谢，@rixo。我要为下一个困惑的n00b添加一件事…在Socket.svelte中你必须
从'/Socket'
导入{msgStore}，然后
让items
然后
让unsubscribe=msgStore.subscribe（msgs=>{items=msgs}）
。在你的HTML中，你可以用
{#每个items作为msg}迭代项目…
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)
};