Svelte 如何将商店作为属性传递？

Question

我有一个 Counter 组件。通常它与 简单值 属性一起使用。但在某些情况下，我想将一个属性作为 反应性 商店传递。

怎么做？我想避免为这两个用例创建两个单独的 Counter。

例如，play

App.svelte

<script>
  import Counter from "./Counter.svelte"
  import { writable } from 'svelte/store'
  
  const counter = writable(0)
  setTimeout(() => counter.update((v) => v + 1), 1000)
</script>

<Counter name="Cats" counter={counter}/>
<Counter name="Dogs" counter={1}/>

Counter.svelte

<script>
  export let name  
  export let counter
</script>

<div>{name} {counter}</div>

但是不起作用，显示为

Cats [object Object]
Dogs 1

如果我将 $counter 更改为 <div>{name} {$counter}</div>，那么这将不起作用 <Counter name="Dogs" counter={1}/>。

P.S.

如果有更好的方法可以在没有反应式存储的情况下处理这个问题，请提出来。

基本上，我有一些逻辑，更新计数器（从服务器通过 websockets 发送的数据），我希望将这些更改传播到 Counter，store 似乎是可能的方式做吧。

但在其他地方 Counter 也用作普通组件，没有任何数据更新，我不想让这些简单的用例过于复杂。

所以我正在寻找一种在两种情况下都使用 Counter 的简单方法。接受简单和反应式属性.

Answer 1

[object Object] 值是完整的存储，您只需要反应式 $counter 值，所以只需将其作为道具，如：

<Counter name="Cats" counter={$counter}/>

这里是 REPL.

Svelte 如何将商店作为 属性 传递？

Svelte how to pass store as a property?

svelte

Svelte 如何将商店作为属性传递？