Svelte 商店未在屏幕上更新
Svelte store not updating on screen
我是 Svelte 的新手,我犯了一个新手错误。我有一个到服务器的 websocket 连接,我正在记录数百条消息并将它们添加到商店,但页面根本没有更新。
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}
socket.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
项目数组的初始长度,但它永远不会更新,即使消息在流动。
你实际上从来没有将任何东西推入 msgStore
,只是 msgs
数组......这本身不是反应性的。
最简单的方法是使用可写存储:
const msgs = []
export const msgStore = writable([])
socket.onmessage(e => {
...
msgs.push(msg)
msgStore.set(msgs)
})
您可以通过导出此的派生而不是可写存储来防止外部回火:
export const publicMsgStore = derived(msgStore, x => x)
或者,要使用可读存储一步完成,您需要它来包装您的整个逻辑:
export const msgStore = readable([], set => {
const msgs = []
...
socket.onmessage(e => {
...
msgs.push(msg)
set(msgs) // <= UPDATE THE STORE!!
})
})
您需要调用注入的 set
函数来更改可读存储的值(或通知它其值已更改)。
我是 Svelte 的新手,我犯了一个新手错误。我有一个到服务器的 websocket 连接,我正在记录数百条消息并将它们添加到商店,但页面根本没有更新。
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}
socket.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
项目数组的初始长度,但它永远不会更新,即使消息在流动。
你实际上从来没有将任何东西推入 msgStore
,只是 msgs
数组......这本身不是反应性的。
最简单的方法是使用可写存储:
const msgs = []
export const msgStore = writable([])
socket.onmessage(e => {
...
msgs.push(msg)
msgStore.set(msgs)
})
您可以通过导出此的派生而不是可写存储来防止外部回火:
export const publicMsgStore = derived(msgStore, x => x)
或者,要使用可读存储一步完成,您需要它来包装您的整个逻辑:
export const msgStore = readable([], set => {
const msgs = []
...
socket.onmessage(e => {
...
msgs.push(msg)
set(msgs) // <= UPDATE THE STORE!!
})
})
您需要调用注入的 set
函数来更改可读存储的值(或通知它其值已更改)。